全部标签
写点什么
学习MySQL开源云计算行业资讯算法Python人工智能区块链Linux前端个人成长面试架构师编程企业动态新基建敏捷安全读书笔记高效工作团队管理创业活动专区生涯规划知识管理运维产品经理 查看更多

【Flutter 专题】75 图解基本 TabBar 标签导航栏 (一)

用户头像
阿策小和尚
关注
发布于: 2 小时前
【Flutter 专题】75 图解基本 TabBar 标签导航栏 (一)

      小菜今天学习一下常用的 TabBar 标签导航栏使用方法；

源码分析

const TabBar({    Key key,    @required this.tabs,            // 顶部标签 Tab 组件列表    this.controller,                // 顶部标签 Tab 控制器    this.isScrollable = false,      // 标签 Tab 是否可滑动    this.indicatorColor,            // 底部指示器颜色    this.indicatorWeight = 2.0,     // 底部指示器高度    this.indicatorPadding = EdgeInsets.zero,    // 底部指示器内边距    this.indicator,                 // 指示器样式    this.indicatorSize,             // 指示器宽度    this.labelColor,                // 标签 Tab 内容颜色    this.labelStyle,                // 标签 Tab 内容样式    this.labelPadding,              // 标签 Tab 内边距    this.unselectedLabelColor,      // 未选中标签 Tab 颜色    this.unselectedLabelStyle,      // 未选中标签 Tab 样式    this.dragStartBehavior = DragStartBehavior.start,    this.onTap,})
const TabBarView({    Key key,    @required this.children,    // 每个 Tab 对应的 Widgets    this.controller,            // 导航栏控制器    this.physics,               // 滑动动画    this.dragStartBehavior = DragStartBehavior.start,   // 处理拖拽开始行为方式})
复制代码


      分析源码可得，TabBar 与 TabBarView 是配对使用的，其对应的 Tab 数量必须相同；其中 TabBar 中提供了众多相关指示器属性，且 TabBar 与 TabBarView 上下拖拽方式区分设置，互不影响；

案例尝试

TabBar

  1. tabs 为顶部标签列表；controller 为标签控制器，若未提供此标签控制器，可使用系统 DefaultTabController 控制器；小菜创建一个基本的 TabBar 样式，其中 TabBar 与 TabBarView 共用一个 TabController 控制器，且对应数量一致；


// 设置 TabControllerclass _TabBarPageState extends State<TabBarPage> with SingleTickerProviderStateMixin {  TabController _tabController;
  @override  void dispose() {    _tabController.dispose();    super.dispose();  }
  void initState() {    super.initState();    _tabController = new TabController(vsync: this, length: 4);  }
  @override  Widget build(BuildContext context) => MaterialApp(home: Scaffold(            appBar: AppBar(title: Text('TabBar Page'),                bottom: TabBar(tabs: <Widget>[                  Tab(text: '今日爆款'), Tab(text: '土货生鲜'), Tab(text: '会员中心'), Tab(text: '分类')                ], controller: _tabController)),            body: TabBarView(controller: _tabController, children: <Widget>[              Center(child: Text('今日爆款')), Center(child: Text('土货生鲜')), Center(child: Text('会员中心')), Center(child: Text('分类'))            ])));}==========================================================================================================================================// 未提供 TabController，使用 DefaultTabController 方式@overrideWidget build(BuildContext context) => DefaultTabController(length: 4,    child: Scaffold(appBar: AppBar(title: Text('TabBar Page'),            bottom: TabBar(tabs: <Widget>[              Tab(text: '今日爆款'), Tab(text: '土货生鲜'), Tab(text: '会员中心'), Tab(text: '分类')            ])),        body: TabBarView(children: <Widget>[          Center(child: Text('今日爆款')), Center(child: Text('土货生鲜')), Center(child: Text('会员中心')), Center(child: Text('分类'))        ])));
复制代码



  1. isScrollable 为标签栏是否可滑动，若设为 true 可按照每个标签宽度延伸，整体可超过屏幕宽度，若不超过屏幕宽度居中展示；若设为 false 则以屏幕宽度为准，多个标签均分宽度；


isScrollable: true/false
复制代码



  1. indicatorColor 为底部指示器颜色；indicatorWeight 为底部指示器高度；indicatorPadding 为底部指示器内边距；


indicatorColor: Colors.redAccent,indicatorWeight: 10,indicatorPadding: EdgeInsets.all(5),
复制代码



  1. indicatorSize 为指示器宽度，其中包括指示器 indicatorPadding 内边距宽度；为 TabBarIndicatorSize，TabBarIndicatorSize.tab 与分配的单个 Tab 宽度；TabBarIndicatorSize.label 为单个 Tab 中 Widget 内容宽度；


indicatorSize: TabBarIndicatorSize.tab,
indicatorSize: TabBarIndicatorSize.label,
复制代码



  1. labelColor 为 Tab 标签内容颜色；labelStyle 为 Tab 标签样式；labelPadding 为 Tab 内边距；当 labelColor 和 labelStyle 均设置颜色时以 labelColor 为准；但如果 Tab 中 Widgets 设置样式时以 Tab 设置为准，labelStyle 不生效；


// tabs 内容Tab(text: '今日爆款'), Tab(text: '土货生鲜'), Tab(text: '会员中心'),Tab(child: Text('分类', style: TextStyle(color: Colors.black, fontSize: 18))),
labelColor: Colors.redAccent,labelStyle: TextStyle(color: Colors.green, fontSize: 16),
复制代码



  1. unselectedLabelColor 为未选中标签颜色；unselectedLabelStyle 为未选中标签样式；当 unselectedLabelColor 和 unselectedLabelStyle 均设置颜色时以 unselectedLabelColor 为准；但如果 Tab 中 Widgets 设置样式时以 Tab 设置为准，unselectedLabelStyle 不生效；


labelColor: Colors.redAccent,labelStyle: TextStyle(color: Colors.green, fontSize: 16),unselectedLabelColor: Colors.white,unselectedLabelStyle: TextStyle(fontSize: 14),
复制代码



  1. dragStartBehavior 为处理拖拽开始行为方式，DragStartBehavior.start 为初始位置为拖动开始位置；DragStartBehavior.down 为初始位置为点击触摸下位置；小菜对此理解不够深入，希望更清楚的朋友多多交流；


dragStartBehavior: DragStartBehavior.down,
复制代码

TabBarView

      physics 为通用的滑动动画，可以设置是否滑动或其他滑动模式；可通过 NeverScrollableScrollPhysics() 禁止滑动切换 Tab；


physics: NeverScrollableScrollPhysics(),
复制代码


小扩展

      TabBar 一般使用在 AppBar bottom 中，上面会有 Title 层，小菜尝试，TabBar 也可以直接应用在 Title 处；


Scaffold(appBar: AppBar(title: _tabBarBottom()), body: _tabBarView())
Scaffold(appBar: AppBar(    title: _tabBarBottom(), leading: Icon(Icons.android),    actions: <Widget>[Padding(padding: EdgeInsets.symmetric(horizontal: 10), child: Icon(Icons.list))]),    body: _tabBarView())
复制代码




      TabBar 案例源码



      小菜对 TabBar 的应用不够深入，下节重点尝试自定义 indicator；如有错误请多多指导！


来源： 阿策小和尚

划线
评论
复制
发布于: 2 小时前阅读数: 3

版权声明: 本文为 InfoQ 作者【阿策小和尚】的原创文章。

原文链接:【http://xie.infoq.cn/article/be583a475a4d55b0ed5b369cb】。文章转载请联系作者。

Flutter 小菜0 基础学习 FlutterAndroid 小菜鸟8 月日更
用户头像

阿策小和尚

关注

还未添加个人签名 2021.05.13 加入

Android / Flutter 小菜鸟～

评论

发布
暂无评论
Copyright © 2021, Geekbang Technology Ltd. All rights reserved. 极客邦控股（北京）有限公司 | 京 ICP 备 16027448 号 - 5京公网安备京公网安备 11010502039052号
【Flutter 专题】75 图解基本 TabBar 标签导航栏 (一)