当前位置：首页 > article >正文

Flutter组件————AppBar

article 2025/3/1 15:33:31

AppBar 是 Flutter 中用于创建应用程序顶部栏的组件，它遵循 Material Design 规范。

参数：

参数名称	类型	描述
`title`	`Widget`	设置 `AppBar` 中的标题文本或自定义标题小部件。
`automaticallyImplyLeading`	`bool`	决定是否自动添加返回按钮（如果页面不是首页）。
`leading`	`Widget`	设置 `AppBar` 左侧的控件，如菜单图标或自定义小部件。
`actions`	`List<Widget>`	设置 `AppBar` 右侧的操作按钮列表。
`elevation`	`double`	定义 `AppBar` 下方阴影的高度。
`centerTitle`	`bool`	决定 `title` 是否居中显示，默认值根据平台而异。
`backgroundColor`	`Color`	设置 `AppBar` 的背景颜色。
`foregroundColor`	`Color`	设置 `AppBar` 内部元素的颜色，例如标题和操作按钮的颜色。
`shadowColor`	`Color`	设置 `AppBar` 阴影的颜色。
`surfaceTintColor`	`Color`	设置 `AppBar` 表面高光的颜色。
`toolbarHeight`	`double`	设置 `AppBar` 的总高度。
`bottom`	`PreferredSizeWidget`	设置 `AppBar` 底部的小部件，如 `TabBar`。
`shape`	`ShapeBorder`	定义 `AppBar` 的形状，例如圆角矩形等。
`iconTheme`	`IconThemeData`	用于定义 `AppBar` 内部图标的样式。
`primary`	`bool`	指示此 `AppBar` 是否是屏幕的主要工具栏。
`titleSpacing`	`double`	定义 `title` 周围的间距。

代码示例

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  //所有右侧行为按钮
  List<Widget> actionList = const [
    Icon(Icons.social_distance),
    SizedBox(
      width: 30,
    ),
    Icon(Icons.cyclone),
    SizedBox(
      width: 30,
    ),
    Icon(Icons.manage_accounts),
    SizedBox(
      width: 40,
    )
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary, //背景颜色
        foregroundColor: const Color.fromARGB(135, 226, 5, 255),
        leading: const Icon(Icons.accessibility_new_rounded), //左侧按钮
        title: const Text("Flutter 示例"), //标题
        actions: actionList, //右侧按钮
        elevation: 10, //下方阴影
        shadowColor: const Color.fromARGB(136, 0, 225, 255), //阴影颜色
        centerTitle: true, // 标题是否居中（ios默认居中，Android默认居左）
        surfaceTintColor: const Color.fromARGB(172, 249, 128, 0), //表面颜色
        toolbarHeight: 45, //顶部栏高度
        iconTheme: const IconThemeData(
        size: 30, color: Color.fromARGB(207, 255, 251, 0)), //控制内部元素样式
        primary: true, // 是否显示主要按钮
        titleSpacing: 100, //标题内边距
        bottom: const TabBar(tabs: [
          Tab(icon: Icon(Icons.directions_car)),
          Tab(icon: Icon(Icons.directions_transit)),
          Tab(icon: Icon(Icons.directions_bike)),
        ]), //顶部栏底部按钮
        shape:const  RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(
            bottom: Radius.circular(15)
          )  //顶部栏底部按钮样式
        ),
      ), //顶部栏
      body: Center(
        child: ListView(
          children: [],
        ),
      ),
    );
  }
}