Scaffold 笔记内容大纲
1. Scaffold.appBar 属性
AppBar 的属性图
一般由
AppBar() 控件作为参数传入，是放在屏幕顶部并且拥有固定高度的一个控件。
AppBar 有一个 bottom属性，传入TabBar ()实例，可以快速实现如下“新闻-历史-图片”切换导航效果：
bottom 属性的作用
// 主要代码
class _ScaffoldRouteState extends State<ScaffoldRoute>
with SingleTickerProviderStateMixin {
TabController _tabController; //需要定义一个Controller
List tabs = ["新闻", "历史", "图片"];
@override
void initState() {
super.initState();
// 创建Controller
_tabController = TabController(length: tabs.length, vsync: this);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
... //省略无关代码
bottom: TabBar( //生成Tab菜单
controller: _tabController,
tabs: tabs.map((e) => Tab(text: e)).toList()
),
),
... //省略无关代码
}
2. Scaffold.bottomNavigationBar 属性
- 情况一：使用
BottomNavigationBar()作为参数，是最常用的一种方法。实现的 UI 效果如下。
BottomNavigationBar
// 主要代码如下：
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Text('Business'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('School'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
- 情况二：使用
BottomAppBar()和floatingActionButton()构建如下页面：
中间带有大按钮的页面结构
// 主要代码如下：
return Scaffold(
appBar: AppBar(
title: Text('Sample Code'),
),
body: Center(
child: Text('You have pressed the button $_count times.'),
),
bottomNavigationBar: BottomAppBar(
shape: const CircularNotchedRectangle(),
child: Row(
children: <Widget>[
IconButton(icon: Icon(Icons.home)),
SizedBox(),
IconButton(icon: Icon(Icons.business))
],
mainAxisAlignment: MainAxisAlignment.spaceAround,
)
),
floatingActionButton: FloatingActionButton(
onPressed: () => setState(() {
_count++;
}),
tooltip: 'Increment Counter',
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
3. Scaffold.draw 属性
一般将 Draw() 作为参数传入，此时 Scaffold 会自动将 AppBar 的 leading 设置为菜单按钮，点击便可打开抽屉菜单。如果我们想要自定义菜单图标，可以手动设置 leading。
drawer 效果图
