Flutter：添加Material 3搜索栏与抽屉导航时图标位置异常

数据老陈

2026-6-15

解决Material3 SearchBar与Drawer导航图标位置问题

问题原因

你直接将SearchBar设为AppBar的title，导致AppBar默认的Drawer导航图标（菜单按钮）显示在SearchBar外部，不符合预期的Material3样式。

解决方案

要让导航图标融入SearchBar内部，需调整AppBar和SearchBar的配置，具体代码修改如下：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      clipBehavior: Clip.none,
      // 关闭AppBar自动生成的leading图标
      automaticallyImplyLeading: false,
      title: SizedBox(
        width: double.infinity,
        child: SearchBar(
          // 在SearchBar内部添加Drawer触发按钮
          leading: Builder(
            builder: (context) => IconButton(
              icon: const Icon(Icons.menu),
              onPressed: () => Scaffold.of(context).openDrawer(),
            ),
          ),
          // 可选：添加搜索图标到右侧，贴合Material3风格
          trailing: const [Icon(Icons.search)],
        ),
      ),
    ),
    drawer: Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          const DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.blue,
            ),
            child: Text('Drawer Header'),
          ),
          ListTile(
            title: const Text('Item 1'),
            onTap: () {
              // 此处添加页面跳转或状态更新逻辑
            },
          ),
          ListTile(
            title: const Text('Item 2'),
            onTap: () {
              // 此处添加页面跳转或状态更新逻辑
            },
          ),
        ],
      ),
    ),
    body: CustomScrollView(
      scrollDirection: Axis.vertical,
      slivers: [
        HomeScreen(),
      ],
    ),
  );
}