顶部按钮切换栏

顶部按钮切换栏_第1张图片 

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        backgroundColor: Colors.grey[100],
        appBar: AppBar(
          //添加左边按钮
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigation',
            onPressed: () => debugPrint('Navigation button is pressed'),
          ),
          title: Text('MrSu'),
          //添加右边按钮
          actions: [
            IconButton(
              icon: Icon(Icons.search),
              tooltip: 'Search',
              onPressed: null,
            ),
          ],
          elevation: 0.0,
          // 底部切换按钮
          bottom: TabBar(
            unselectedLabelColor: Colors.black38,//未被选中的颜色
            indicatorColor: Colors.black54,
            indicatorSize: TabBarIndicatorSize.label,
            indicatorWeight: 2.0,
            tabs: [
              Tab(
                icon: Icon(Icons.local_florist),
              ),
              Tab(
                icon: Icon(Icons.change_history),
              ),
              Tab(
                icon: Icon(Icons.directions_bike),
              ),
            ],
          ),
        ),
        //切换按钮对应的内容列表
        body: TabBarView(
          //里面的三条就是点击不同的按钮对应的页面内容
          children: [
            ListViewDemo(),
            Icon(Icons.do_not_disturb,size:128.0),
            Icon(Icons.dns,size: 128.0,),
          ],
        ),
      ),
    );
  }
}

 

你可能感兴趣的:(FlutterDemo)