Flutter（十七）AppBar导航栏

AppBar属性

• title: Text("appBar"), // 标题
• leading: Icon(Icons.add_a_photo), //左边第一个icon
• actions右边的多个icon
• flexibleSpace导航栏+标题栏整体区域
• bottom: //导航栏底部区域
• elevation: 20, // 底部阴影
• shape背景形状，包括导航栏+bottom+标题栏
• backgroundColor: Colors.red[200], //背景色
• brightness: Brightness.light, //亮度主题：dark时，标题了的图标都是白色；light时，标题栏的图标都是黑色
• iconTheme// 对所有icon的统一设置，包括颜色、透明度和大小。包括actions部分的图标，但是会被actionsIconTheme覆盖
• actionsIconTheme：对actions部分的icon设置主题。
• centerTitle: true, // 标题是否居中
• titleSpacing: 20,
• toolbarOpacity: 0.9, // 导航栏中的所有icon actions 等的透明度
• bottomOpacity: 0.5, // 导航栏下的bottom区域的icon child的透明度

flutter的导航栏widget，里面有很多元素，如图：

image.png

class _MyHomePageState extends State {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("appBar"), // 标题
        leading: Icon(Icons.add_a_photo), //左边第一个icon
        //右边的多个icon
        actions: [
          Icon(Icons.add_alarm),
          Center(
            child: Text('action'),
          ),
          Icon(Icons.add_alarm),
        ],
        //导航栏+标题栏整体区域
//        flexibleSpace: Center(child: Text("flexibleSpace"),),
//        flexibleSpace: Text("flexibleSpace"),
//        flexibleSpace: Container(
//          color: Colors.green,
//        ),
        //导航栏底部区域
        bottom: PreferredSize(
            child: ConstrainedBox(
              constraints: BoxConstraints.tightFor(height: 50),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Icon(Icons.cached),
                  Icon(Icons.dashboard),
                  Icon(Icons.flag)
                ],
              ),
            ),
            preferredSize: Size(200, 30)),
        elevation: 20, // 底部阴影
        //背景形状，包括导航栏+bottom+标题栏
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
        backgroundColor: Colors.red[200], //背景色
        brightness: Brightness.light, //亮度主题：dark时，标题了的图标都是白色；light时，标题栏的图标都是黑色
        // 对所有icon的统一设置，包括颜色、透明度和大小。包括actions部分的图标，但是会被actionsIconTheme覆盖
        iconTheme: IconThemeData(color: Colors.blue, opacity: 0.5, size: 30),
        // 对actions部分的icon设置主题。
        actionsIconTheme:
            IconThemeData(color: Colors.green, opacity: 0.5, size: 30),
        textTheme: TextTheme(
          title: TextStyle(
              backgroundColor: Colors.red, fontSize: 15), // title的style
        ),
        centerTitle: true, // 标题是否居中
        titleSpacing: 20,
        toolbarOpacity: 0.9, // 导航栏中的所有icon actions 等的透明度
        bottomOpacity: 0.5, // 导航栏下的bottom区域的icon  child的透明度
      ),
    );
  }

}

欢迎关注我的公众号：Flutter和Dart开发实践

让我们共同学习进步，It is never too late to learn!

image.png