如何实现类似Google Chats的圆角悬浮AppBar及抽屉触发搜索栏

核心实现思路 #

• 浮动圆角AppBar：借助PreferredSize自定义AppBar尺寸，用ClipRRect裁剪圆角，再通过外层Padding营造悬浮间距，搭配阴影增强层次感
• 抽屉联动：利用Scaffold自带的drawer属性，通过AppBar左侧按钮触发打开
• 圆角搜索容器：将TextField嵌套在带圆角装饰的Container中，配合搜索图标实现样式匹配

完整代码示例 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Google Chats Style UI',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const ChatHomePage(),
    );
  }
}

class ChatHomePage extends StatelessWidget {
  const ChatHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      // 侧边抽屉
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: const [
            DrawerHeader(
              decoration: BoxDecoration(color: Colors.blue),
              child: Text('侧边菜单'),
            ),
            ListTile(title: Text('聊天列表')),
            ListTile(title: Text('设置')),
          ],
        ),
      ),
      // 浮动圆角AppBar
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(60),
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(12),
            child: AppBar(
              backgroundColor: Colors.white,
              elevation: 2,
              leading: IconButton(
                icon: const Icon(Icons.menu, color: Colors.black),
                onPressed: () => Scaffold.of(context).openDrawer(),
              ),
              title: const _SearchBar(),
            ),
          ),
        ),
      ),
      body: const Center(child: Text('聊天内容区域')),
    );
  }
}

// 独立搜索栏组件
class _SearchBar extends StatelessWidget {
  const _SearchBar();

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.grey[200],
        borderRadius: BorderRadius.circular(8),
      ),
      child: const TextField(
        decoration: InputDecoration(
          hintText: '搜索',
          prefixIcon: Icon(Icons.search, color: Colors.grey),
          border: InputBorder.none,
          contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 10),
        ),
      ),
    );
  }
}

关键细节说明 #

• AppBar圆角实现：ClipRRect直接裁剪整个AppBar的圆角，外层Padding让AppBar和屏幕边缘产生间距，模拟悬浮效果
• 搜索栏样式：通过Container的decoration设置背景色和圆角，TextField去掉默认边框，只保留前缀图标和提示文本
• 抽屉触发逻辑：leading按钮点击时调用Scaffold.of(context).openDrawer()，直接触发系统抽屉展开

内容的提问来源于stack exchange，提问作者DRing