AppBar

AppBar

AppBar是一个Material风格的导航栏，通过它可以设置导航栏标题、导航栏菜单、导航栏底部的Tab标题等。其构造：

AppBar({
  Key? key,
  this.leading, //导航栏最左侧Widget，常见为抽屉菜单按钮或返回按钮。
  this.automaticallyImplyLeading = true, //如果leading为null，是否自动实现默认的leading按钮
  this.title,// 页面标题
  this.actions, // 导航栏右侧菜单
  this.bottom, // 导航栏底部菜单，通常为Tab按钮组
  this.elevation = 4.0, // 导航栏阴影
  this.centerTitle, //标题是否居中 
  this.backgroundColor,
  ...   
})

title、leading、actions

标题和左右两边的设置

appBar: AppBar(
    //背景色
    backgroundColor: Colors.orange,
    title: const Text('导航栏'),
    //左边
    leading: Builder(builder: (context){
      return IconButton(
        onPressed: (){},
        icon: const Icon(Icons.notification_add,color: Colors.white,),
      );
    }),
    //右边
    actions: [
      IconButton(
        icon: const Icon(Icons.file_upload),
        onPressed: () => {
          print("Click on upload button")
        },
      ),
      IconButton(
          icon: const Icon(Icons.settings),
          onPressed: () => {
            print("Click on settings button")
          }
      ),
      PopupMenuButton(
        icon: const Icon(Icons.share),
        itemBuilder: (context) => [
          const PopupMenuItem(
            value: 1,
            child: Text("Facebook"),

          ),
          const PopupMenuItem(
            value: 2,
            child: Text("Instagram"),
          ),
        ],
      )
    ],
  ),

bottom

AppBar的底部区域通常用于包含TabBar。一定要有DefaultTabController。

  import 'package:flutter/material.dart';

class AppPage extends StatelessWidget {
  const AppPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AppPage',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: TabBarPage(),
    );

  }
}

class TabBarPage extends StatelessWidget {
  const TabBarPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
          appBar: AppBar(
            bottom: const TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car),),
                Tab(icon: Icon(Icons.directions_transit),),
                Tab(icon: Icon(Icons.directions_bike),),
              ],
            ),
            //背景色
            title: const Text('导航栏'),
            automaticallyImplyLeading: true,
          ),
          body: const TabBarView(
            children: [
              Center(child: Text("Car")),
              Center(child: Text("Transit")),
              Center(child: Text("Bike"))
            ],
          )

      ),
    );

  }
}