Flutter 仿微信/QQ 消息侧滑功能实现：使用 flutter_slidable

微信和 QQ 都有常用的左右滑动来执行操作的交互，比如删除、置顶等功能。使用 Flutter 的 flutter_slidable插件，我们可以轻松实现类似的滑动操作界面。本篇博客将介绍如何在 Flutter 中使用 flutter_slidable 来创建微信/QQ 样式的侧滑操作。

效果：

1. flutter_slidable 插件介绍

flutter_slidable 是一个 Flutter 插件，用于在列表项中添加左右滑动操作，常用于实现类似微信/QQ 消息界面的侧滑删除、置顶等功能。它提供了多种配置方式，使得我们可以自由定义滑动手势和按钮。

2. 安装和集成 flutter_slidable

首先，在 pubspec.yaml 文件中添加 flutter_slidable 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_slidable: ^3.1.1

然后运行以下命令来安装依赖：

flutter pub get

3. 使用 flutter_slidable 实现基本的侧滑功能

下面我们创建一个简单的 Flutter 项目，使用 flutter_slidable 实现类似微信的侧滑功能。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Slidable Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final List<String> items = List.generate(20, (index) => '联系人 $index');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('仿微信/QQ 侧滑样式'),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return Slidable(
            key: ValueKey(items[index]),
            endActionPane: ActionPane(
              motion: const StretchMotion(),
              children: [
                SlidableAction(
                  onPressed: (context) => _pinMessage(index),
                  backgroundColor: Colors.blue,
                  foregroundColor: Colors.white,
                  icon: Icons.push_pin,
                  label: '置顶',
                ),
                SlidableAction(
                  onPressed: (context) => _deleteItem(index),
                  backgroundColor: Colors.red,
                  foregroundColor: Colors.white,
                  icon: Icons.delete,
                  label: '删除',
                ),
              ],
            ),
            child: ListTile(
              leading: CircleAvatar(
                backgroundImage: AssetImage('assets/images/weChat.png'), // 添加头像图片
                radius: 25,
              ),
              title: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    items[index],
                    style: const TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                    ),
                  ),
                  Text(
                    '下午3:45', // 模拟时间显示
                    style: TextStyle(
                      color: Colors.grey[600],
                      fontSize: 12,
                    ),
                  ),
                ],
              ),
              subtitle: Text(
                '这是消息预览，最多显示一行...', // 模拟微信的消息预览
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                  color: Colors.grey[600],
                  fontSize: 14,
                ),
              ),
              contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 0),
              onTap: () {
                // 点击进入聊天窗口
                print('点击了：${items[index]}');
              },
            ),
          );
        },
      ),
    );
  }

  void _deleteItem(int index) {
    print('删除消息：$index');
  }

  void _pinMessage(int index) {
    print('置顶消息：$index');
  }
}

4. 自定义侧滑按钮和样式

我们可以根据需求自定义按钮的样式、动画和操作逻辑。例如，使用 endActionPane 使侧滑更符合用户的操作习惯。上面的例子中，我们使用了 endActionPane 进行左滑操作，也可以用 startActionPane 做右滑操作。

你还可以根据 UI 需求，自定义按钮的颜色、图标等。

自定义示例：

  // 自定义的 SlidableAction
  Widget _customSlidableAction({
    required IconData icon,
    required String label,
    required Color backgroundColor,
    required VoidCallback onTap,
  }) {
    return Expanded( // 使用 Expanded 让按钮自适应宽度，避免溢出
      child: GestureDetector(
        onTap: onTap,
        child: Container(
          color: backgroundColor,
          padding: const EdgeInsets.symmetric(vertical: 10),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(icon, size: 24, color: Colors.white),
              const SizedBox(height: 4),
              Text(
                label,
                style: const TextStyle(
                  fontSize: 12, // 自定义字体大小
                  color: Colors.white,
                ),
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
      ),
    );
  }

调用处代码：

5. 总结

flutter_slidable 是一个非常强大的工具，用于实现侧滑操作，模仿微信或 QQ 的消息操作是非常常见的场景。在本文中，我们展示了如何集成和使用 flutter_slidable，并通过自定义实现了更加灵活的侧滑功能。你可以根据实际需求，进一步优化和扩展滑动操作。