Flutter 组件之AppBar、顶部TabBar、仿今日头条顶部导航练习

亦凉 2023-07-17 11:28 7阅读 0赞

> `debugShowCheckedModeBanner:false,`//去掉debug图标  
> `initialRoute:'/initDemo',`//初始化的时候加载的路由

##### AppBar自定义顶部按钮颜色、图标 #####

appBar:AppBar(
    	title:Text("AppBarButton"),
    	centerTitle:true,//标题居中显示
    	leading:IconButton(//如果有自定义按钮当前页面的默认返回按钮就被覆盖
    		icon:Icon(Icons.menu),
    		onPressed:(){ 
    			print("点击AppBarButton图标");
    		}
    	),
    	actions:<Widget>[
    		IconButton(
    			icon:Icon(Icons.search),
    			onPressed:(){ 
    				print("点击search图标");
    			}
    		),	
    		IconButton(
    			icon:Icon(Icons.settings),
    			onPressed:(){ 
    				print("点击settings图标");
    			}
    		),	
    	]
    )

##### AppBar自定义TabBar实现顶部Tab切换 #####

class MyApp extends StatelessWidget{ 
    
      @override
      Widget build(BuildContext context) { 
        return new MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'TabBar Demo',
          home: new Scaffold(
            body: DefaultTabController(//顶部TabBar
                length: 2,//顶部TabBar数量
                initialIndex: 1,//默认选择第一项
                child: Scaffold(//这里配置bottom属性来写TabBar
                  appBar: new AppBar(//顶部内容
                    title: new Text('TabBar Demo'),
                    leading: Icon(Icons.menu),
                    actions: <Widget>[//尾部图标
                      Icon(Icons.search)
                    ],
                    bottom: new TabBar(//这里面写TabBar
                      tabs: <Widget>[
    						 Tab(text: '选项一',icon: Icon(Icons.add_shopping_cart),),
       						 Tab(text: '选项二',icon: Icon(Icons.wifi_tethering),),
    					],
                      indicatorColor: Colors.black,//指示器颜色
                      indicatorWeight: 5,指示器高度
                      //指示器大小计算方式，TabBarIndicatorSize.label跟文字等宽,TabBarIndicatorSize.tab跟每个tab等宽
                      indicatorSize: TabBarIndicatorSize.label,,//指示器大小,底部边框
                      labelColor: Colors.limeAccent,//选中label颜色
                      unselectedLabelColor: Colors.deepOrange,//未选中label颜色
                    ),
                  ),
                  body: new TabBarView(//关联上面的bottomTabBar 这里可以配置多个组件,
                  	//数组数量跟TabBar要一致
                      children: <Widget>[
    						Text( 'TabBarView选项一'),
    					    Text( 'TabBarView选项二'),
    					],
                  ),
                )
            ),
          ),
        );
      }
    }

##### 把TabBar放在导航最顶部（不要原生AppBar） #####

> 只需要把TabBar 从bottom中移到 appBar -> title 中

class MyApp extends StatelessWidget{ 
    
      @override
      Widget build(BuildContext context) { 
        return new MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'TabBar Demo',
          home: new Scaffold(
            body: DefaultTabController(//顶部TabBar
                length: 8,//顶部TabBar数量
                initialIndex: 1,默认选择第一项
                child: Scaffold(//这里配置bottom属性来写TabBar
                  appBar: new AppBar(//顶部内容
                    title: Row(//title 里面放TabBar组件
    					children:<Widget>[
    						Expanded:(
    							child:TabBar(//这里面写TabBar
    							  isScrollable: true,//允许滚动
    							  indicatorColor: Colors.black,//指示器颜色
    			                  indicatorWeight: 5,指示器高度
    			                  //指示器大小计算方式，TabBarIndicatorSize.label跟文字等宽,TabBarIndicatorSize.tab跟每个tab等宽
    			                  indicatorSize: TabBarIndicatorSize.label,,//指示器大小,底部边框
    			                  labelColor: Colors.limeAccent,//选中label颜色
    			                  unselectedLabelColor: Colors.deepOrange,//未选中label颜色
    			                  tabs: <Widget>[
    									  Tab(text: "热销1"),
    				                      Tab(text: "推荐2"),
    				                      Tab(text: "推荐3"),
    				                      Tab(text: "推荐4") ,
    				                      Tab(text: "推荐5"),
    				                      Tab(text: "推荐6"),
    				                      Tab(text: "推荐7"),
    				                      Tab(text: "推荐8")
    								],
    			                ),
    						),
    					]
    				),
                  ),
                  body: new TabBarView(//关联上面的bottomTabBar 这里可以配置多个组件,
                  	//数组数量跟TabBar要一致
                      children: <Widget>[
    						Text( 'TabBarView选项一'),
    					    Text( 'TabBarView选项二'),
    					    Text( 'TabBarView选项3'),
    					    Text( 'TabBarView选项4'),
    					    Text( 'TabBarView选项5'),
    						Text( 'TabBarView选项6'),
    						Text( 'TabBarView选项7'),
    						Text( 'TabBarView选项8'),
    					],
                  ),
                )
            ),
          ),
        );
      }
    }

##### AppBar中自定义TabBar实现Tabs的另一种方法 #####

> controller的好处就是可以再initState 初始化时执行一些自定义事件。比如 `_tabController.addListener();`

步骤：

1.  继承 `SingleTickerProviderStateMixin`
2.  `TabController _tabController;` 配置controller参数
3.  重写`void initState()` 初始化方法
4.  `_tabController = new TabController(length: 8, vsync: this);` 实例化TabController
5.  TabBar、TabBarView中配置 `controller: this._tabController,`

示例代码：

import 'package:flutter/material.dart';
    
    /* * StatefulWidget Template */
    class TabContollerPage extends StatefulWidget { 
      TabContollerPage({ Key key}) : super(key: key);
    
      @override
      _TabContollerPageState createState() => _TabContollerPageState();
    }
    //这里要继承 SingleTickerProviderStateMixin
    class _TabContollerPageState extends State<TabContollerPage> with SingleTickerProviderStateMixin{ 
      TabController _tabController; //配置controller参数
    
     
      @override
      void initState() { //初始化已加载触发的方法
        // TODO: implement initState
        super.initState();
    // TabController 两个参数一个tabBar 个数,另一个固定写法
        _tabController = new TabController(length: 8, vsync: this);
    	//定义事件
        _tabController.addListener((){ 
          print(_tabController.index);
        });
      }
    
      //其他写法与刚才Scaffold 里的写法一样
      //需要注意的就是要在TabBar 和 TabView中配置controller
      @override
      Widget build(BuildContext context) { 
        return  Scaffold(
              appBar: AppBar(
                backgroundColor: Colors.black26,
                title: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Expanded(
                      child: TabBar(
                        controller: this._tabController,//必须要配置这个包括下面的tabView
                        indicatorColor: Colors.blue,
                        labelColor: Colors.blue,
                        unselectedLabelColor: Colors.white,
                        indicatorSize: TabBarIndicatorSize.label,
                        isScrollable: true,//允许滚动
                        tabs: <Widget>[
                          Tab(text: "热销1"),
                          Tab(text: "推荐2"),
                          Tab(text: "推荐3"),
                          Tab(text: "推荐4") ,
                          Tab(text: "推荐5"),
                          Tab(text: "推荐6"),
                          Tab(text: "推荐7"),
                          Tab(text: "推荐8")
                        ],
                      ),
                    )
                  ],
                ),
              ),
              body: TabBarView(
                controller: this._tabController,//controller 必须配置
                children: <Widget>[
                  ListView(
                    children: <Widget>[
                      ListTile(title: Text("第一个tab")),
                      ListTile(title: Text("第一个tab")),
                      ListTile(title: Text("第一个tab"))
                    ],
                  ),
                  ListView(
                    children: <Widget>[
                      ListTile(title: Text("第二个tab")),
                      ListTile(title: Text("第二个tab")),
                      ListTile(title: Text("第二个tab"))
                    ],
                  ),
                  ListView(
                    children: <Widget>[
                      ListTile(title: Text("第3个tab")),
                      ListTile(title: Text("第3个tab")),
                      ListTile(title: Text("第一个tab"))
                    ],
                  ),
                  ListView(
                    children: <Widget>[
                      ListTile(title: Text("第4个tab")),
                      ListTile(title: Text("第二个tab")),
                      ListTile(title: Text("第二个tab"))
                    ],
                  ),
                  ListView(
                    children: <Widget>[
                      ListTile(title: Text("第5个tab")),
                      ListTile(title: Text("第二个tab")),
                      ListTile(title: Text("第二个tab"))
                    ],
                  ),
                  ListView(
                    children: <Widget>[
                      ListTile(title: Text("第6个tab")),
                      ListTile(title: Text("第二个tab")),
                      ListTile(title: Text("第二个tab"))
                    ],
                  ),
                  ListView(
                    children: <Widget>[
                      ListTile(title: Text("第7个tab")),
                      ListTile(title: Text("第二个tab")),
                      ListTile(title: Text("第二个tab"))
                    ],
                  ),
                  ListView(
                    children: <Widget>[
                      ListTile(title: Text("第8个tab")),
                      ListTile(title: Text("第二个tab")),
                      ListTile(title: Text("第二个tab"))
                    ],
                  )
                ],
              )
        );
      }
    }