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

Flutter组件————AppBar

news 2025/7/5 21:48:21

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});@overrideState<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,)];@overrideWidget 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: [],),),);}
}