Flutter AppBar Widget 及自定义导航栏
Flutter 使用 MaterialApp
构造整个应用的话,可以使用 Scalfold
作为页面的结构
而 Scalfold
页面结构中,头部导航通过 appBar
指定值是 AppBar
Widget 即可
AppBar
的构造函数如下:
AppBar({
Key key,
this.leading,
this.automaticallyImplyLeading = true,
this.title,
this.actions,
this.flexibleSpace,
this.bottom,
this.elevation,
this.shape,
this.backgroundColor,
this.brightness,
this.iconTheme,
this.actionsIconTheme,
this.textTheme,
this.primary = true,
this.centerTitle,
this.titleSpacing = NavigationToolbar.kMiddleSpacing,
this.toolbarOpacity = 1.0,
this.bottomOpacity = 1.0,
})
一般我们都是指定 title
来指定导航栏的标题,除此之外可以自定义一些导航栏按钮等操作
centerTitle
属性能够指定所有的标题都会居中,默认情况下,文字标题 title
属性在 ios 上是居中的,而在 android 上不是居中的,靠近左边
leading
能够指定左侧的图标按钮,在某些首页或者 tab 情况下,因此不需要返回,可能唤起一个 Drawer
,一般会在导航左侧加一个图标,点击唤起 drawer
actions
用来在导航左侧添加一系列的按钮或者文字,定义如下:
/// Widgets to display after the [title] widget.
///
/// Typically these widgets are [IconButton]s representing common operations.
/// For less common operations, consider using a [PopupMenuButton] as the
/// last action.
final List<Widget> actions;
actions
接收一个 List<Widget>
数据,理论上什么类型的 Widget 都可以塞进去
evaluation
是导航栏底部的阴影,在 material design 中,是建议留着的,如果指定 0
就可以不显示阴影。
backgroundColor
用来指定背景色,可以直接传颜色值
iconTheme
和 actionIconTheme
都可以指定 themedata 不需要单个 icon 去指定颜色等
自定义 AppBar 通过上面几个属性即可控制,比如:
class MyApp extends StatelessWidget {
MyApp({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('自定义 AppBar'),
centerTitle: true,
backgroundColor: Colors.pink,
leading: IconButton(
icon: Icon(Icons.home),
onPressed: () {
print('home app bar');
},
),
elevation: 0,
actions: <Widget>[
Center(
child: Text('所有订单'),
),
IconButton(
icon: Icon(Icons.more_horiz),
onPressed: () {},
),
],
),
body: HomeContent(),
),
);
}
}
最终结果:
【所有订单】与后面的三个点儿iconButton 都属于 actions,一般考虑适配和显示,都只设置最多两 3个 actions button
完整代码链接:
文章版权:Postbird-There I am , in the world more exciting!
本文链接:http://www.ptbird.cn/flutter-materialapp-scalfold-appbar-diy.html
转载请注明文章原始出处 !