如何实现可拖拽且影响Scaffold主体的仿WhatsApp表情选择器

核心组件选择：DraggableScrollableSheet #

这个组件天生支持拖拽调整高度，可自定义拖拽手柄，能完美匹配你需要的拖拽特性，还能和Scaffold布局联动，让聊天主体区域自动适配高度变化。

具体实现思路 #

1. 状态管理控制显示/隐藏 #

用布尔变量（比如isEmojiPickerVisible）控制表情选择器的显示状态，直接嵌套在Scaffold的body布局中，这样能更好地和聊天主体联动，避免单独弹层的布局冲突。

2. 布局结构设计 #

• 聊天页面主体用Column布局：顶部是Expanded包裹的聊天消息列表，会自动占据剩余空间；底部是输入栏 + 表情选择器容器。
• 表情选择器用DraggableScrollableSheet包裹，设置关键参数：
  • 最小高度设为0（完全隐藏）或输入栏高度（仅显示手柄）
  • 最大高度设为屏幕高度的一半，和WhatsApp一致
  • 初始高度根据显示状态动态调整

3. 自定义拖拽手柄 #

在DraggableScrollableSheet的builder中添加自定义手柄，比如一个中间带凹槽的窄条，样式和WhatsApp对齐。

4. 与键盘平滑切换 #

• 监听键盘弹出/收起事件（可通过WidgetsBinding或flutter_keyboard_visibility包实现）
• 键盘弹出时自动隐藏表情选择器，表情选择器展开时自动收起键盘
• 用AnimationController实现高度变化的平滑过渡，让切换更自然

5. 核心代码示例 #

class ChatScreen extends StatefulWidget {
  const ChatScreen({super.key});

  @override
  State<ChatScreen> createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> with SingleTickerProviderStateMixin {
  bool _isEmojiPickerVisible = false;
  late AnimationController _animationController;
  late Animation<double> _heightAnimation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 200),
    );
    _heightAnimation = Tween<double>(begin: 0, end: MediaQuery.of(context).size.height * 0.5).animate(
      CurvedAnimation(parent: _animationController, curve: Curves.easeInOut),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  void _toggleEmojiPicker() {
    setState(() {
      _isEmojiPickerVisible = !_isEmojiPickerVisible;
    });
    if (_isEmojiPickerVisible) {
      FocusScope.of(context).unfocus();
      _animationController.forward();
    } else {
      _animationController.reverse();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("聊天")),
      body: Column(
        children: [
          // 聊天消息列表，自动适配剩余空间
          Expanded(
            child: ListView.builder(
              reverse: true,
              itemCount: 20,
              itemBuilder: (context, index) => ListTile(title: Text("消息 $index")),
            ),
          ),
          // 输入栏
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Row(
              children: [
                IconButton(
                  icon: const Icon(Icons.emoji_emotions),
                  onPressed: _toggleEmojiPicker,
                ),
                Expanded(child: TextField(decoration: const InputDecoration(hintText: "输入消息"))),
                IconButton(icon: const Icon(Icons.send), onPressed: () {}),
              ],
            ),
          ),
          // 表情选择器
          AnimatedBuilder(
            animation: _animationController,
            builder: (context, child) {
              return SizedBox(
                height: _heightAnimation.value,
                child: DraggableScrollableSheet(
                  initialChildSize: _isEmojiPickerVisible ? 1 : 0,
                  minChildSize: 0,
                  maxChildSize: 1,
                  builder: (context, scrollController) {
                    return Column(
                      children: [
                        // 自定义拖拽手柄
                        Container(
                          width: 40,
                          height: 4,
                          margin: const EdgeInsets.symmetric(vertical: 8),
                          decoration: BoxDecoration(
                            color: Colors.grey[400],
                            borderRadius: BorderRadius.circular(2),
                          ),
                        ),
                        // 表情GridView
                        Expanded(
                          child: GridView.builder(
                            controller: scrollController,
                            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                              crossAxisCount: 8,
                            ),
                            itemCount: 100,
                            itemBuilder: (context, index) => IconButton(
                              icon: const Icon(Icons.emoji_emotions),
                              onPressed: () {},
                            ),
                          ),
                        ),
                      ],
                    );
                  },
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

6. 优化点 #

• 监听键盘高度变化，避免键盘与表情选择器布局冲突
• 给表情选择器添加背景色，对齐WhatsApp样式
• 支持向下拖拽到底部时自动隐藏表情选择器

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