Flutter组件————AppBar

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

效果