1. 介绍

  • AppBar是Flutter中用于在顶部显示标题和操作按钮的组件。
  • 它通常用于Scaffold的appBar属性中,作为应用程序顶部的导航栏。

2. 属性

  • title: AppBar中显示的标题文本。
  • actions: 在AppBar右侧显示的操作按钮列表。
  • backgroundColor: AppBar的背景颜色。
  • elevation: AppBar下方阴影的高度。
  • leading: 在AppBar左侧显示的Widget,通常是一个返回按钮或菜单按钮。
  • automaticallyImplyLeading: 是否自动添加一个返回按钮,默认为true。

3. 使用示例

Scaffold(
  appBar: AppBar(
    title: Text('My App'),
    actions: [
      IconButton(
        icon: Icon(Icons.search),
        onPressed: () {
          // 搜索操作
        },
      ),
      IconButton(
        icon: Icon(Icons.settings),
        onPressed: () {
          // 设置操作
        },
      ),
    ],
  ),
  body: Container(
    child: Center(
      child: Text('Hello World'),
    ),
  ),
)

4. 总结

  • AppBar是Flutter中用于显示在顶部导航栏上的组件,可以包含标题、操作按钮等。
  • 可以通过设置不同属性来自定义AppBar的外观和功能。