@TOCAppbar
类似iOS导航栏,但有一定区别
Appbar属性
leading
在标题前面显示的一个控件,在首页通常显示应用的 logo;在其他界面通常显示为返回按钮。
automaticallyImplyLeading
如果没有leading,automaticallyImplyLeading为true,就会默认返回箭头
如果 没有leading 且为false,空间留给title
如果有leading,这个参数就无效了
title
标题
actions
导航栏右侧按钮数组
flexibleSpace
一个显示在 AppBar 下方的控件,高度和 AppBar 高度一样,可以实现一些特殊的效果,该属性通常在 SliverAppBar 中使用
bottom
一个 AppBarBottomWidget 对象,通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏
elevation
阴影的高度。默认值为 4,对于可滚动的 SliverAppBar,当 SliverAppBar 和内容同级的时候,该值为 0, 当内容滚动 SliverAppBar 变为 Toolbar 的时候,修改 elevation 的值。
shape
阴影
backgroundColor
Appbar 的背景色,默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用。
brightness
Appbar 的亮度,有白色和黑色两种主题,默认值为
iconTheme
icon主题。默认值为 ThemeData.primaryIconTheme。;修改iconTheme会修改所有的icon的样式,不仅仅是左侧的,右侧的也会改变
actionsIconTheme
选中icon主题
textTheme
文本主题设置
primary
appbar是否显示在导航栏的顶部,为false是显示在顶部,为true就显示在导航栏的中部
centerTitle
标题是否居中显示
titleSpacing
标题间距,如果希望title占用所有可用空间,请将此值设置为0.0。
默认为NavigationToolbar.kMiddleSpacing。
toolbarOpacity
应用程序栏的工具栏的透明程度。值1.0是完全不透明的,值0.0是完全透明的
bottomOpacity
appBar底部透明度,设置方式同toolbarOpacity
例子
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
//StatelessWidget 无状态widget
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
//MaterialApp 安卓风格APP
return new MaterialApp(
title: 'welcome',
// scoffold 脚手架
home: new Scaffold(
appBar: new AppBar(
title: new Text('首页'),
leading: new Icon(Icons.home),
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.add_alarm),
tooltip: 'Add Alarm',
onPressed: () {}),
],
backgroundColor: Colors.red,
primary: true,
iconTheme: IconThemeData(color: Colors.yellow, size: 30, opacity: 1),
toolbarOpacity: 0.5,
),
body: new Center(
child: new Row(
children: <Widget>[
new Expanded(
child: RaisedButton(
onPressed: () {},
color: Colors.red,
textColor: Colors.white,
disabledColor: Colors.blueGrey,
child: Text('Button', style: TextStyle(fontSize: 12)),
),
),
new Expanded(
child: new Text(
'yayayay',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 35.0,
background: Paint()..color = Colors.red[50]),
),
),
],
),
),
backgroundColor: Colors.yellow,
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
BottomNavigationBarItem(
icon: Icon(Icons.message), title: Text("消息")),
],
fixedColor: Colors.blue,
),
),
);
}
}