AppBar属性概要
Material Design风格的顶部导航栏。
AppBar({
// 键
Key key,
// 左侧按钮(默认为返回按钮、左侧抽屉按钮)
this.leading,
// 与leading、actions相关,用于自动推断leading的值(如返回按钮,打开draw的按钮等,或空缺)
this.automaticallyImplyLeading = true,
// 顶部导航栏标题
this.title,
// 顶部导航栏右侧菜单按钮
this.actions,
// 灵活空间
this.flexibleSpace,
// toolbar下面固定的空间(常用于设置TabBar)
this.bottom,
// AppBar的海拔高度和阴影有关,值为0时无投影,值越大投影范围越大且颜色越浅
this.elevation,
// AppBar的形状
this.shape,
// 整个AppBar的背景颜色
this.backgroundColor,
// 设置状态栏图标为暗色还是亮色
this.brightness,
// 设置Icons的样式(透明度、颜色及大小)
this.iconTheme,
// 顶部右侧按钮主题(颜色、透明度、大小)
this.actionsIconTheme,
// 设置标题字体样式
this.textTheme,
// 设置是否有状态栏高度
this.primary = true,
// 设置标题是否居中
this.centerTitle,
// 设置在没有leading和actions时是否留出空间,入围0.0则全部为title的空间
this.titleSpacing = NavigationToolbar.kMiddleSpacing,
// 设置AppBar的透明度
this.toolbarOpacity = 1.0,
// 设置bottom的透明度
this.bottomOpacity = 1.0,
})
下图为AppBar的样图
TabBar(bottom属性)使用示例
class MyTabbedPage extends StatefulWidget {
const MyTabbedPage({ Key key }) : super(key: key);
@override
_MyTabbedPageState createState() => _MyTabbedPageState();
}
// 混合 SingleTickerProviderStateMixin 类的特性
class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin {
// TabBar的子项
final List<Tab> myTabs = <Tab>[
Tab(text: 'LEFT'),
Tab(text: 'RIGHT'),
];
// TabBar控制器
TabController _tabController;
@override
void initState() {
super.initState();
// 在initState中初始化TabController
_tabController = TabController(vsync: this, length: myTabs.length);
}
@override
void dispose() {
// 在dispose中解除回收TabController
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// 在AppBar.bottom属性中使用TabBar
bottom: TabBar(
controller: _tabController,
tabs: myTabs,
),
),
// 与TabBar联动的TabBarView设置
body: TabBarView(
controller: _tabController,
children: myTabs.map((Tab tab) {
return Center(
child: Text(
'This is the ${tab.text.toLowerCase()} tab',
style: const TextStyle(fontSize: 36),
),
);
}).toList(),
),
);
}
}