如何在Flutter中实现该聊天框设计？slidible组件无法正常工作

需要实现上图的聊天界面设计，但使用Slidable组件时无法正常工作，当前尝试的效果如下：

常见失效原因及解决代码 #

Slidable失效大多源于滚动嵌套冲突、布局约束错误或滑动方向配置不匹配，以下是可直接复用的完整实现方案：

1. 先添加依赖 #

在pubspec.yaml中引入flutter_slidable：

dependencies:
  flutter_slidable: ^3.0.0

2. 完整实现代码 #

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('聊天界面')),
        body: const ChatList(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
      itemCount: 10,
      itemBuilder: (context, index) {
        // 模拟己方和对方消息区分
        final isMyMessage = index % 2 == 0;
        return ChatMessageItem(
          isMyMessage: isMyMessage,
          content: '这是一条测试消息 $index',
        );
      },
    );
  }
}

class ChatMessageItem extends StatelessWidget {
  final bool isMyMessage;
  final String content;

  const ChatMessageItem({
    super.key,
    required this.isMyMessage,
    required this.content,
  });

  @override
  Widget build(BuildContext context) {
    return Align(
      // 根据消息归属设置对齐方向
      alignment: isMyMessage ? Alignment.centerRight : Alignment.centerLeft,
      child: Slidable(
        // 己方消息仅开放右侧滑动操作
        endActionPane: isMyMessage
            ? ActionPane(
                motion: const ScrollMotion(),
                children: [
                  SlidableAction(
                    onPressed: (_) {},
                    backgroundColor: Colors.red.shade700,
                    foregroundColor: Colors.white,
                    icon: Icons.delete,
                    label: '删除',
                  ),
                ],
              )
            : null,
        // 对方消息仅开放左侧滑动操作
        startActionPane: isMyMessage
            ? null
            : ActionPane(
                motion: const ScrollMotion(),
                children: [
                  SlidableAction(
                    onPressed: (_) {},
                    backgroundColor: Colors.grey.shade700,
                    foregroundColor: Colors.white,
                    icon: Icons.copy,
                    label: '复制',
                  ),
                ],
              ),
        child: Container(
          margin: const EdgeInsets.symmetric(vertical: 6),
          padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
          decoration: BoxDecoration(
            color: isMyMessage ? Colors.blue.shade100 : Colors.grey.shade200,
            borderRadius: BorderRadius.circular(18),
          ),
          child: Text(content),
        ),
      ),
    );
  }
}

关键注意点 #

• 避免在Slidable外层添加拦截触摸事件的组件（如GestureDetector），若必须添加需处理事件传递
• 滑动操作的方向要和消息对齐方向匹配，避免出现操作按钮被屏幕边缘截断的情况
• 使用ScrollMotion保证滑动操作和列表滚动的交互兼容性

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