Flutter Appbar Widget使用详解

Flutter的AppBar Widget是一个常用的顶部导航栏控件，可以帮助开发者快速实现应用的导航和标题显示。在本文中，我将向你介绍AppBar的常见属性和用法。

基本用法 要使用AppBar Widget，只需在Scaffold Widget中添加它作为参数即可。例如，以下代码展示了如何创建一个带有标题“Flutter App”的AppBar：

Scaffold(
  appBar: AppBar(
    title: Text("Flutter App"),
  ),
  body: Container(
    // 应用程序的主体内容
  ),
);

在这个例子中，我们创建了一个Scaffold Widget，并设置了一个AppBar Widget作为它的顶部导航栏。AppBar的标题通过Text Widget来指定。除此之外，我们还在Scaffold中添加了一个Container Widget作为应用程序的主体内容。

AppBar有许多可用的属性，包括以下几个常见的属性：

• title: AppBar的标题，通常是一个Text Widget。
• leading: AppBar左侧的小部件，通常是一个IconButton Widget，用于打开侧边栏菜单或返回上一页。
• actions: AppBar右侧的小部件，通常是一些IconButton Widget，用于执行一些操作，如搜索或设置。
• backgroundColor: AppBar的背景色。
• elevation: AppBar的高度，通常是一个双精度浮点数，单位是像素。
• centerTitle: 是否将标题居中显示，默认值为false。

以下是一个使用所有这些属性的例子：

Scaffold(
  appBar: AppBar(
    title: Text("Flutter App"),
    leading: IconButton(
      icon: Icon(Icons.menu),
      onPressed: () {
        // 打开侧边栏菜单的代码
      },
    ),
    actions: [
      IconButton(
        icon: Icon(Icons.search),
        onPressed: () {
          // 执行搜索操作的代码
        },
      ),
      IconButton(
        icon: Icon(Icons.settings),
        onPressed: () {
          // 打开设置页面的代码
        },
      ),
    ],
    backgroundColor: Colors.blue,
    elevation: 4.0,
    centerTitle: true,
  ),
  body: Container(
    // 应用程序的主体内容
  ),
);

自定义AppBar

如果你想要更多的控制权，你可以使用PreferredSize Widget来创建自定义的AppBar。PreferredSize Widget需要一个preferredSize属性，用于指定AppBar的大小。你可以使用SizedBox Widget来设置AppBar的大小。

让我来举一个更具体的自定义AppBar的例子。假设我们要创建一个带有搜索框的AppBar，搜索框可以在用户输入时实时搜索内容。

首先，我们可以创建一个StatefulWidget，名为SearchAppBar。在State类中，我们创建一个TextEditingController，用于控制搜索框的文本输入。

class SearchAppBar extends StatefulWidget implements PreferredSizeWidget {
  final String title;
  final double height;

  SearchAppBar({required this.title, this.height = kToolbarHeight});

  @override
  _SearchAppBarState createState() => _SearchAppBarState();

  @override
  Size get preferredSize => Size.fromHeight(height);
}

class _SearchAppBarState extends State<SearchAppBar> {
  final TextEditingController _searchController = TextEditingController();
  String _searchText = '';

  @override
  void initState() {
    super.initState();
    _searchController.addListener(_onSearchChanged);
  }

  @override
  void dispose() {
    _searchController.removeListener(_onSearchChanged);
    _searchController.dispose();
    super.dispose();
  }

  void _onSearchChanged() {
    setState(() {
      _searchText = _searchController.text;
    });
    // TODO: 执行搜索操作
  }

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(widget.title),
      backgroundColor: Colors.blue,
      centerTitle: true,
      actions: [
        IconButton(
          icon: Icon(Icons.search),
          onPressed: () {},
        ),
      ],
      bottom: PreferredSize(
        child: TextField(
          controller: _searchController,
          decoration: InputDecoration(
            hintText: 'Search',
            border: OutlineInputBorder(),
          ),
        ),
        preferredSize: Size.fromHeight(50.0),
      ),
    );
  }
}

在build方法中，我们返回一个AppBar Widget，设置了各种属性。为了添加搜索框，我们使用了PreferredSize Widget，并将其放在AppBar的底部。搜索框是一个TextField Widget，我们将其放在PreferredSize的child属性中，并指定其preferredSize为Size.fromHeight(50.0)。

当用户输入搜索框时，我们需要执行搜索操作。为此，我们使用了TextEditingController来监听搜索框的文本变化，并在_onSearchChanged方法中更新_searchText变量的值。我们还在dispose方法中移除了_listener，以避免内存泄漏。

现在，我们可以在Scaffold中使用SearchAppBar了：

Scaffold(
  appBar: SearchAppBar(title: 'My App'),
  body: Container(
    // 应用程序的主体内容
  ),
);

这样，我们就创建了一个带有搜索框的AppBar，并可以在用户输入搜索框时实时搜索内容了。