Flutter 基础篇（二十一）—— Scaffold

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

完整开源地址：https://docs.qq.com/doc/DSkNLaERkbnFoS0ZF

this.bottom, // 导航栏底部菜单，通常为Tab按钮组

this.elevation = 4.0, // 导航栏阴影

this.centerTitle, //标题是否居中

this.backgroundColor,

… //其它属性见源码注释

})

示例：

class App extends StatelessWidget{

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

//抽屉菜单

leading: Builder(builder: (context){

return IconButton(

icon: Icon(Icons.dashboard,color:Colors.white),

onPressed: (){},

);

},),

//标题

title: Text(‘导航栏’),

//导航栏右侧菜单

actions: [

IconButton(

icon: Icon(Icons.share),

onPressed: (){},

)

],

),

),

);

}

}

TabBar

---

在 Material 组件库中，提供了 TabBar 组件用于快速生成 Tab 菜单。在导航栏的底部通常是一组 Tab 菜单，可以通过上面 AppBar 的 bottom 属性来指定这组菜单。示例：

class _HomeContentState extends State with SingleTickerProviderStateMixin{

TabController _tabController;

List tabs = [“新闻”,“历史”,“图片”];

void initState(){

super.initState();

_tabController = TabController(length: tabs.length, vsync: this);

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

//抽屉菜单

leading: Builder(builder: (context){

return IconButton(

icon: Icon(Icons.dashboard,color:Colors.white),

onPressed: (){},

);

},),

//标题

title: Text(‘导航栏’),

//导航栏右侧菜单

actions: [

IconButton(

icon: Icon(Icons.share),

onPressed: (){},

)

],

//导航栏底部Tab

bottom: TabBar(

controller: _tabController,

tabs: tabs.map((item) => Tab(text: item)).toList()

),

),

);

}

}

在上面的代码中，TabBar 用于生成一个 Tab 菜单， TabController 用于控制/监听 Tab 菜单的切换，Tab 组件代表一个菜单，定义如下：

Tab({

Key key,

this.text, // 菜单文本

this.icon, // 菜单图标

this.child, // 自定义组件样式

})

TabBarView

---

通过上面的 TabBar 只能生成一个静态的菜单，Tab 菜单和 Tab 页面切换需要同步，然而实现这一功能的就需要通过 TabBarView 组件了。TabBarView 组件不仅可以轻松实现 Tab ，而且可以非常容易配合 TabBar 来实现同步切换和滑动状态同步。示例：

class _HomeContentState extends State with SingleTickerProviderStateMixin{

TabController _tabController;

List tabs = [“新闻”,“历史”,“图片”];

void initState(){

super.initState();

_tabController = TabController(length: tabs.length, vsync: this);

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

//抽屉菜单

leading: Builder(builder: (context){

return IconButton(

icon: Icon(Icons.dashboard,color:Colors.white),

onPressed: (){},

);

},),

//标题

title: Text(‘导航栏’),

//导航栏右侧菜单

actions: [

IconButton(

icon: Icon(Icons.share),

onPressed: (){},

)

],

//导航栏底部Tab

bottom: TabBar(

controller: _tabController,

tabs: tabs.map((item) => Tab(text: item)).toList()

),

),

body: TabBarView(

controller: _tabController,

children: tabs.map((e){

return Container(

alignment: Alignment.center,

child: Text(e,textScaleFactor:5),

);

}).toList(),

),

);

}

}