主页 / coding / 问题 / 79319944
Accepted
Mervin Hemaraju
Asked: 2024-12-31 20:15:51 +0800 CST

Flutter：添加带有抽屉导航的 Material 3 搜索栏

  • 772

我对 Flutter 还比较陌生，我正在尝试将新的 Material 3搜索栏与抽屉导航一起添加到我的应用程序中，但它并没有按预期工作。

它看起来是这样的：

在此处输入图片描述

导航图标应该位于搜索栏内。

下面是我的代码：

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        clipBehavior: Clip.none,
        title: SearchBar(),
      ),
      drawer: Drawer(
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text('Drawer Header'),
            ),
            ListTile(
              title: const Text('Item 1'),
              onTap: () {
                // Update the state of the app.
                // ...
              },
            ),
            ListTile(
              title: const Text('Item 2'),
              onTap: () {
                // Update the state of the app.
                // ...
              },
            ),
          ],
        ),
      ),
      body: CustomScrollView(
        scrollDirection: Axis.vertical,
        slivers: [
          // MesAppBar(),
          HomeScreen(),
        ],
      ),
    );
  }
}
flutter

1 个回答

  1. Best Answer

    首先，您需要从 AppBar 中删除汉堡图标。您可以通过将 automatedImplyLeading 设置为 false 来实现这一点，之后，您可以通过设置 leading 属性将所需的 IconButton 放入 SearchBar 小部件中。要管理抽屉的打开/关闭功能，您可以为 Scaffold 分配一个 GlobalKey 并执行以下操作：_scaffoldKey.currentState?.openDrawer() or closeDrawer().

    以下是工作代码：

    @override
Widget build(BuildContext context) {
  return Scaffold(
    key: _scaffoldkey, // GlobalKey
    appBar: AppBar(
      clipBehavior: Clip.none,
      automaticallyImplyLeading: false,
      title: SearchBar(
        leading: IconButton(
            onPressed: () {
              _scaffoldkey.currentState?.openDrawer();
            },
            icon: const Icon(Icons.menu)),
      ),
    ),
    drawer: Drawer(
      child: ListView(
        // Important: Remove any padding from the ListView.
        padding: EdgeInsets.zero,
        children: [
          const DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.blue,
            ),
            child: Text('Drawer Header'),
          ),
          ListTile(
            title: const Text('Item 1'),
            onTap: () {
              // Update the state of the app.
              // ...
            },
          ),
          ListTile(
            title: const Text('Item 2'),
            onTap: () {
              // Update the state of the app.
              // ...
            },
          ),
        ],
      ),
    ),
    body: CustomScrollView(
      scrollDirection: Axis.vertical,
      slivers: [
        // MesAppBar(),
        HomeScreen(),
      ],
    ),
  );
}
    • 1

相关问题