【自学Flutter】18 TabBar、TabBarView、BottomAppBar 导航栏和浮动按钮的使用

18 TabBar、TabBarView、BottomAppBar 导航栏和浮动按钮的使用

1.源代码
import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin{

  TabController tabController;
  List<String> list = ["首页","追番","历史"];

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: list.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text("导航栏名称"),
            leading: Builder(builder: (context){
              return IconButton(
                icon: Icon(Icons.dehaze,color: Colors.white,),
                onPressed: (){
                  Scaffold.of(context).openDrawer();
                },
              );
            }),
            actions: <Widget>[
              IconButton(
                icon:Icon(Icons.share),
                color: Colors.white,
                onPressed: (){},
              ),
            ],
            bottom: TabBar(
              tabs: list.map( (e)=> Tab(text: e) ).toList(),
              controller: tabController,
            ),
          ),
          drawer: MyDrawer(),
          body: TabBarView(
            controller: tabController,
            children: list.map((e){
              return Container(
                alignment: Alignment.center,
                child: Text(e),
              );
            }).toList(),
          ),
          bottomNavigationBar: BottomAppBar(
            color: Colors.orange,
            shape: CircularNotchedRectangle(),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                IconButton(icon: Icon(Icons.group_work,color: Colors.white,), onPressed: (){}),
                SizedBox(),
                IconButton(icon: Icon(Icons.apps,color: Colors.white,), onPressed: (){})
              ],
            ),
          ),
          floatingActionButton: IconButton(icon: Icon(Icons.add_circle,color: Colors.blue),iconSize: 60,padding: EdgeInsets.all(0), onPressed: (){}),
          floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        )
    );
  }
}

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: MediaQuery.removePadding(
          context: context,
          removeTop: true,
          child: Column(
            children: <Widget>[
              Container(
                padding: EdgeInsets.all(20.0),
                color: Colors.blue,
                child:
                Row(
                  children: <Widget>[
                    ClipOval(
                      child: Image.network("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3024387196,1621670548&fm=27&gp=0.jpg",width: 80.0,),
                    ),
                    Container(
                      margin: EdgeInsets.only(left: 50.0),
                      child: Text("无名氏",style: TextStyle(
                          fontSize: 20.0,
                          color: Colors.white
                      ),),
                    ),
                  ],
                ),
              ),
              Expanded(
                child: ListView(
                  children: <Widget>[
                    ListTile(
                      leading: Icon(Icons.person,color: Colors.orange,),
                      title: Text("个人信息"),
                      onTap: (){},
                    ),
                    ListTile(
                      leading: Icon(Icons.wallpaper,color: Colors.orange,),
                      title: Text("我的相册"),
                      onTap: (){},
                    ),
                    ListTile(
                      leading: Icon(Icons.wallpaper,color: Colors.orange,),
                      title: Text("我的相册"),
                      onTap: (){},
                    ),
                    ListTile(
                      leading: Icon(Icons.settings,color: Colors.orange,),
                      title: Text("设置"),
                      onTap: (){},
                    ),
                  ],
                ),
              )
            ],
          )
      ),
    );
  }
}

2.解释源代码
import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin{

  //声明TabController 
  TabController tabController;
  //
  List<String> list = ["首页","追番","历史"];

  @override
  void initState() {
    super.initState();
    //创建TabController 
    tabController = TabController(length: list.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text("导航栏名称"),
            leading: Builder(builder: (context){
              return IconButton(
                icon: Icon(Icons.dehaze,color: Colors.white,),
                onPressed: (){
                  Scaffold.of(context).openDrawer();
                },
              );
            }),
            actions: <Widget>[
              IconButton(
                icon:Icon(Icons.share),
                color: Colors.white,
                onPressed: (){},
              ),
            ],
            //生成Tab菜单
            bottom: TabBar(
              tabs: list.map( (e)=> Tab(text: e) ).toList(),
              controller: tabController,
            ),
          ),
          drawer: MyDrawer(),
          body: TabBarView(
            //通过监听切换Tab页
            controller: tabController,
            //创建3个Tab页
            children: list.map((e){
              return Container(
                alignment: Alignment.center,
                child: Text(e),
              );
            }).toList(),
          ),
          //底部导航栏
          bottomNavigationBar: BottomAppBar(
            //背景颜色
            color: Colors.orange,
            //底部导航栏留个圆形的空位
            shape: CircularNotchedRectangle(),
            child: Row(
              //横向平分空间
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                IconButton(icon: Icon(Icons.group_work,color: Colors.white,), onPressed: (){}),
                //该位置留空
                SizedBox(),
                IconButton(icon: Icon(Icons.apps,color: Colors.white,), onPressed: (){})
              ],
            ),
          ),
          //浮动按钮
          floatingActionButton: IconButton(icon: Icon(Icons.add_circle,color: Colors.blue),iconSize: 60,padding: EdgeInsets.all(0), onPressed: (){}),
          //浮动按钮位置
          floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        )
    );
  }
}

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: MediaQuery.removePadding(
          context: context,
          removeTop: true,
          child: Column(
            children: <Widget>[
              Container(
                padding: EdgeInsets.all(20.0),
                color: Colors.blue,
                child:
                Row(
                  children: <Widget>[
                    ClipOval(
                      child: Image.network("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3024387196,1621670548&fm=27&gp=0.jpg",width: 80.0,),
                    ),
                    Container(
                      margin: EdgeInsets.only(left: 50.0),
                      child: Text("无名氏",style: TextStyle(
                          fontSize: 20.0,
                          color: Colors.white
                      ),),
                    ),
                  ],
                ),
              ),
              Expanded(
                child: ListView(
                  children: <Widget>[
                    ListTile(
                      leading: Icon(Icons.person,color: Colors.orange,),
                      title: Text("个人信息"),
                      onTap: (){},
                    ),
                    ListTile(
                      leading: Icon(Icons.wallpaper,color: Colors.orange,),
                      title: Text("我的相册"),
                      onTap: (){},
                    ),
                    ListTile(
                      leading: Icon(Icons.wallpaper,color: Colors.orange,),
                      title: Text("我的相册"),
                      onTap: (){},
                    ),
                    ListTile(
                      leading: Icon(Icons.settings,color: Colors.orange,),
                      title: Text("设置"),
                      onTap: (){},
                    ),
                  ],
                ),
              )
            ],
          )
      ),
    );
  }
}

3.效果图

效果图
效果图

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值