flutter学习之基础组件（五）

flutter学习之基础组件（五）

本节主要学习Tab组件和抽屉组件的使用

---

---

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

AppBar属性：

Scaffold(
          appBar: AppBar(
            title: Text("自定义appbar、Tab"),
            centerTitle: true,
            //设置标题剧中
            backgroundColor: Colors.red,
            //添加自定义左侧图标
            leading: IconButton(
              icon: Icon(Icons.arrow_back_ios),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
            //添加右侧图标
            actions: [
              IconButton(
                iconSize: 32.0,
                  onPressed: () {
                    print("搜索");
                  },
                  icon: Icon(Icons.search)),
              IconButton(
                  onPressed: () {
                    print("设置");
                  },
                  icon: Icon(Icons.settings)),
            ],
          ),
          ),
        )

二、TabBar实现顶部Tab切换

TabBar 常见属性：

1.使用DefaultTabController实现Tab切换

使用bottom实现tab

class _TestThirteenState extends State<TestThirteen> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: Text("自定义appbar、Tab"),
            centerTitle: true,
            //设置标题剧中
            backgroundColor: Colors.red,
            //添加自定义左侧图标
            leading: IconButton(
              icon: Icon(Icons.arrow_back_ios),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
            //添加右侧图标
            actions: [
              IconButton(
                iconSize: 32.0,
                  onPressed: () {
                    print("搜索");
                  },
                  icon: Icon(Icons.search)),
              IconButton(
                  onPressed: () {
                    print("设置");
                  },
                  icon: Icon(Icons.settings)),
            ],
            bottom: TabBar(tabs: [
              Tab(text: "组件1"),
              Tab(text: "组件2"),
            ]),
          ),
          body: TabBarView(children: [
            ListView(
              children: [
                ElevatedButton(onPressed: (){
                  Navigator.pushNamed(context, "/TestTen");
                }, child: Text("跳转主页设置tab")),
                Text("第一个Tab"),
                Text("第一个Tab"),
                Text("第一个Tab"),
                Text("第一个Tab"),
              ],
            ),
            ListView(
              children: [
                Text("第二个Tab"),
                Text("第二个Tab"),
                Text("第二个Tab"),
                Text("第二个Tab"),
              ],
            ),
          ],
          ),
        ),
    );
  }
}

显示效果：

把Tab放在appBar里面

class _HomePageState extends State<HomePage>{
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(length: 4, child:
    Scaffold(
      appBar: AppBar(
        title: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(child: TabBar(
              isScrollable: true, //条目过多，自动滑动
               tabs: [
              Tab(text: "推荐",),
              Tab(text: "热门",),
              Tab(text: "实时",),
              Tab(text: "军事",),
            ],
            indicatorSize: TabBarIndicatorSize.label,))

          ],
        ),
      ),
      body: TabBarView(children: [
        ListView(
          children: [
            Text("第一个Tab"),
            Text("第一个Tab"),
            Text("第一个Tab"),
          ],
        ),
        ListView(
          children: [
            Text("第二个Tab"),
            Text("第二个Tab"),
            Text("第二个Tab"),
          ],
        ),
        ListView(
          children: [
            Text("第三个Tab"),
            Text("第三个Tab"),
            Text("第三个Tab"),
          ],
        ),
        ListView(
          children: [
            Text("第四个Tab"),
            Text("第四个Tab"),
            Text("第四个Tab"),
          ],
        ),
      ],
      ),
    ));
  }
}

2.使用TabController实现Tab

使用TabController实现Tab切换，优势就是可以设置tab监听事件，但是切记一定要在TabBar和TabBarView设置controller属性，否则会报错

class MessagePage extends StatefulWidget {
  const MessagePage({Key? key}) : super(key: key);

  @override
  _MessagePageState createState() => _MessagePageState();
}

class _MessagePageState extends State<MessagePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(vsync: this, length: 3);
    //监听事件
    _tabController.addListener(() {
        print(_tabController.index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("TabController实现顶部切换"),
        bottom: TabBar(controller: _tabController, tabs: [
          Tab(
            text: "Tab1",
            icon: Icon(Icons.ac_unit),
          ),
          Tab(
            text: "Bab2",
            icon: Icon(Icons.ac_unit),
          ),
          Tab(
            text: "Tab3",
            icon: Icon(Icons.ac_unit),
          )
        ]),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          Center(child: new Text('第一个Tab')),
          Center(child: new Text('第二个Bab')),
          Center(child: new Text('第三个Tab')),
        ],
      ),
    );
  }
}

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

三、Drawer侧边栏（抽屉布局）

侧边栏有两种：
Drawer:左侧边栏
endDrawer:右侧边栏
侧边栏默认是隐藏的，需要我们点击标题栏按钮弹出或者手势滑动滑出
基础侧边栏代码：

class TestFourteen extends StatefulWidget {
  const TestFourteen({Key? key}) : super(key: key);

  @override
  _TestFourteenState createState() => _TestFourteenState();
}

class _TestFourteenState extends State<TestFourteen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter App"),
      ),
      drawer: Drawer(
        child: Text('左侧边栏'),
      ),
      endDrawer: Drawer(
        child: Text('右侧侧边栏'),
      ),
    );
  }
}

1.使用DrawerHeader定义侧边栏顶部

使用DrawerHeader实现左侧边栏效果：

代码：

      //添加左侧抽屉栏目
      drawer: Drawer(
        child: Column(
          children: [
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
                image: DecorationImage(
                  image: NetworkImage("https://img1.baidu.com/it/u=3487414028,2932761123&fm=26&fmt=auto&gp=0.jpg"),
                  fit: BoxFit.cover
                )
              ),
                child: ListTile(
                  leading: CircleAvatar(
                    backgroundImage: NetworkImage("https://c-ssl.duitang.com/uploads/item/201511/19/20151119134519_QduTJ.thumb.1000_0.jpeg"),
                  ),
                  title: Text("name: xiaobin"),
                  subtitle: Text("sex: man"),
                )),
            Divider(),
            ListTile(
              title: Text("个人中心"),
              leading: CircleAvatar(
                child: Icon(Icons.people),
              ),
            ),
            Divider(), //横线
            ListTile(
              title: Text("注册"),
              leading: CircleAvatar(
                child: Icon(Icons.app_registration),
              ),
              onTap: () {
                Navigator.of(context).pop();	//关闭侧边栏		
                Navigator.pushNamed(context, "/RegisterFirstPage");
              },
            ),
            Divider(), //横线
            ListTile(
              title: Text("登录"),
              leading: CircleAvatar(
                child: Icon(Icons.login),
              ),
              onTap: () {
                Navigator.of(context).pop();
                Navigator.pushNamed(context, "/LoginPage");
              },
            ),
          ],
        ),
      ),

2.使用UserAccountsDrawerHeader实现侧边栏头部

效果：
实现代码：

      endDrawer: Drawer(
        child: Column(
          children: [
            Text("UserAccountsDrawerHeader实现头像相关"),
            UserAccountsDrawerHeader(
                accountName: Text("小彬"),
                accountEmail: Text("123145@qq.com"),
              currentAccountPicture: CircleAvatar(
                backgroundImage: NetworkImage("https://img1.baidu.com/it/u=3487414028,2932761123&fm=26&fmt=auto&gp=0.jpg"),
              ),
              decoration: BoxDecoration(
                color: Colors.red,
                image: DecorationImage(
                  image: NetworkImage("https://c-ssl.duitang.com/uploads/item/201511/19/20151119134519_QduTJ.thumb.1000_0.jpeg"),
                  fit: BoxFit.cover
                )
              ),
            ),
            ListTile(
              title: Text("个人中心"),
              leading: CircleAvatar(
                child: Icon(Icons.people),
              ),
            ),
            Divider(), //横线
            ListTile(
              title: Text("注册"),
              leading: CircleAvatar(
                child: Icon(Icons.app_registration),
              ),
              onTap: () {
                Navigator.of(context).pop();
                Navigator.pushNamed(context, "/RegisterFirstPage");
              },
            ),
            Divider(), //横线
            ListTile(
              title: Text("登录"),
              leading: CircleAvatar(
                child: Icon(Icons.login),
              ),
              onTap: () {
                Navigator.of(context).pop();
                Navigator.pushNamed(context, "/LoginPage");
              },
            ),
          ],
        ),
      ),

---

总结