Flutter|Flutter 学习笔记（十）AppBar 定义 Tab 切换 Flutter|Flutter

Flutter 学习笔记（一）安装及运行
Flutter 学习笔记（二）Container组件、Text组件、图片组件
Flutter 学习笔记（三）列表
Flutter 学习笔记（四）Padding、Row、Column、Expanded组件
Flutter 学习笔记（五）Stack & Align、Strack & Positioned 布局组件
Flutter 学习笔记（六）Card、AspectRatio、CircleAvatar 组件
Flutter 学习笔记（七）RaisedBotton、Wrap组件
Flutter 学习笔记（八）StatefulWidget组件
Flutter 学习笔记（九）BottomNavigationBar 组件底部导航
Flutter 学习笔记（十）AppBar 定义 Tab 切换
Flutter 学习笔记（十一） Drawer 侧边栏
Flutter 学习笔记（十二）floatingActionButton 类似闲鱼按钮
Flutter 学习笔记（十三）TextField、Checkbox、Radio 组件
Flutter 学习笔记（十四）时间组件
Flutter 学习笔记（十五）flutter_swiper 轮播组件
Flutter 学习笔记（十六）Dialog 组件
Flutter 学习笔记（十七）网络数据请求
Flutter 学习笔记（十八）路由跳转

文章目录

AppBar 添加按钮、图标
AppBar 切换
Scaffold 嵌套，title 作为TabBar
TabController

AppBar 添加按钮、图标

class AppBarDemo extends StatelessWidget { const AppBarDemo({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('AppDemo'), centerTitle: true, backgroundColor: Colors.red, leading: IconButton( icon: Icon(Icons.menu), onPressed: (){ }, ), actions: [ IconButton( icon: Icon(Icons.home), onPressed:(){ } ), ], ), body: Text('111111111111111'), ); } }

AppBar 切换

class AppBarDemo extends StatelessWidget { const AppBarDemo({Key key}) : super(key: key); @override Widget build(BuildContext context) { return DefaultTabController( length: 2, child: Scaffold( appBar: AppBar( title: Text('Title'), bottom: TabBar( tabs: [ Tab(text: 'A',), Tab(text: 'B',), ], ), ), body: TabBarView( children: [ Center( child: Text('11111111'),), Center( child: Text('22222222'),), ], ), ), ); } }

文章图片

Scaffold 嵌套，title 作为TabBar

class Category extends StatelessWidget { @override Widget build(BuildContext context) { return DefaultTabController( length: 2, child: Scaffold( appBar: AppBar( title: TabBar( tabs: [ Tab(text: 'A',), Tab(text: 'B',), ], indicatorSize: TabBarIndicatorSize.tab, isScrollable: true, ), ), body: TabBarView( children: [ Center( child: Text('11111111'), ), Center( child: Text('22222222'), ), ], ), ),); } }

【Flutter|Flutter 学习笔记（十）AppBar 定义 Tab 切换】

文章图片

TabController 必须使用StatefulWidget

class AppBarDemo extends StatefulWidget { AppBarDemo({Key key}) : super(key: key); @override _AppBarDemoState createState() => _AppBarDemoState(); }class _AppBarDemoState extends State with SingleTickerProviderStateMixin{ TabController _tabController; void initState(){ super.initState(); _tabController=new TabController(length: 2, vsync: this); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('TabControl'), bottom: TabBar( controller: _tabController, tabs: [ Tab(text: 'ASD',), Tab(text: 'QWE',), ], ), ), body: TabBarView( controller: _tabController, children: [ Center(child: Text('111111111')), Center(child: Text('222222222')), ], ), ); } }