“This is the 13th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge juejin.cn/post/698796…

Today, we will learn how to use the common TabBar navigation bar.

Source code analysis

Const TabBar({Key Key, @required this.tabs, // top Tab Tab component list this.controller, // the top Tab Tab controller this.isScrollable = false, // the bottom Tab indicatorColor this.indicatorWeight = 2.0, // the bottom Tab indicatorColor this. // This. IndicatorPadding = edgeinset.zero, // this. IndicatorPadding = edgeinset.zero, // This. // This. LabelColor, // this. LabelStyle, // this. / / tags Tab padding enclosing unselectedLabelColor, / / not selected tags Tab color this. UnselectedLabelStyle, This.dragstartbehavior = dragStartBehavior. start, this.ontap,}) const TabBarView({Key Key, @required this.children, // Widgets for each Tab, // navigation controller this.physics, This.dragstartbehavior = dragStartBehavior.start, // Handle dragStartBehavior})Copy the code

Analysis of the source code can be obtained, TabBar and TabBarView is paired to use, its corresponding Tab number must be the same; Among them, TabBar provides many related indicator attributes, and TabBar and TabBarView drag up and down to distinguish Settings, do not affect each other;

Case try

TabBar

  1. Tabs is the list of top tags; Controller is a label controller. If no label controller is provided, use the system DefaultTabController controller. Create a basic TabBar style, where TabBar and TabBarView share the same number of TabController controllers;
/ / set TabController class _TabBarPageState extends the 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> ], controller: _tabController)), body: TabBarView(controller: _tabController, Children: <Widget>[Center(child: The Text (' hot style today), Center (child: Text (' goods from home fresh abroad), Center (child: Text (' member Center), Center (child: Text (' classification '))))); } = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ================== // TabController not provided, @Override Widget build(BuildContext Context) => DefaultTabController(length: 4, Child: Scaffold(appBar: appBar (title: Text('TabBar Page'), bottom: TabBar(Tabs: <Widget>]), Tab(Text: 'TabBar Page') 'TabBarView '), Tab(text:' member Center '), Tab(text: 'Category ')])), Body: TabBarView(Children: <Widget>[Center(child: The Text (' hot style today), Center (child: Text (' goods from home fresh abroad), Center (child: Text (' member Center), Center (child: Text (' classification ')))));Copy the code

  1. IsScrollable indicates whether the TAB bar can be swiped. If set to true, the TAB bar can be extended according to the width of each TAB. The overall TAB bar can be extended beyond the screen width. If this parameter is set to false, the screen width prevails, and multiple labels have equal width.
isScrollable: true/false
Copy the code

  1. IndicatorColor for the bottom indicatorColor; IndicatorWeight is the height of the bottom indicator; IndicatorPadding is the inner margin of the bottom indicator;
indicatorColor: Colors.redAccent,
indicatorWeight: 10,
indicatorPadding: EdgeInsets.all(5),
Copy the code

  1. IndicatorSize is the width of the indicator, including the edge width of the indicator indicatorPadding; For TabBarIndicatorSize, TabBarIndicatorSize. TAB and the assigned width of a single TAB; TabBarIndicatorSize. The label for a single Tab Widget content width;
indicatorSize: TabBarIndicatorSize.tab,

indicatorSize: TabBarIndicatorSize.label,
Copy the code

  1. LabelColor is the content color of the Tab. LabelStyle for Tab style; LabelPadding is the inside margin of the Tab; When labelColor and labelStyle are set to color, the labelColor shall prevail; If Tab Widgets are set to the Tab style, labelStyle does not take effect.
// Tabs (child: text (' tabs '), Tab(text: 'tabs '), Tab(text:' tabs '), Tab(child: text (' tabs '), style: TextStyle(color: Colors.black, fontSize: 18))), labelColor: Colors.redAccent, labelStyle: TextStyle(color: Colors.green, fontSize: 16),Copy the code

  1. UnselectedLabelColor indicates the unselectedLabelColor. UnselectedLabelStyle is an unselectedLabelStyle; When both unselectedLabelColor and unselectedLabelStyle are set to color, unselectedLabelColor shall prevail. If Tab Widgets are set to Tab style, unselectedLabelStyle does not take effect.
labelColor: Colors.redAccent,
labelStyle: TextStyle(color: Colors.green, fontSize: 16),
unselectedLabelColor: Colors.white,
unselectedLabelStyle: TextStyle(fontSize: 14),
Copy the code

  1. DragStartBehavior is the start behavior mode of handling drag, dragStartBehavior. start is the initial position and the start position of dragging. DragStartBehavior. Down: the initial position is the position under click and touch; Side dish this understanding is not deep enough, hope more clear friends to communicate;
dragStartBehavior: DragStartBehavior.down,
Copy the code

TabBarView

Physics is a universal slide animation that allows you to set whether to slide or not. Through NeverScrollableScrollPhysics () prohibit the slide switch Tab;

physics: NeverScrollableScrollPhysics(),
Copy the code

A small extension

TabBar is usually used in the bottom of the AppBar, there will be a Title layer above, side dish try, TabBar can also be directly applied in the 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())
Copy the code

TabBar case source code

The application of TabBar is not deep enough for the side dishes. In the next section, we will try to customize indicators. If there is a mistake, please guide!

Source: Young Monk Atze