用来列表项左右滑动
flutter_slidable库地址: pub.flutter-io.cn/packages/fl…
当前使用版本: 1.1.0

有且只能出现一个滑动项

使用到的关键词:

• SlidableAutoCloseBehavior
• groupTag

SlidableAutoCloseBehavior(
  child: ListView.builder(
    itemBuilder: (BuildContext context, int index) {
      return _buildMessageItem(index);
    },
    itemCount: 10,
    itemExtent: 80,
  )
)

Widget _buildMessageItem(int index) {
    return Slidable(
        key: ValueKey("$index"),
        groupTag: "ccc", // 把所有item归类到一个组, 保证同时只出现一个滑动的效果
        endActionPane: ActionPane(
          extentRatio: 0.2,  // 控制滑动项widget的大小
          motion: const DrawerMotion(),  // 抽屉式效果, 还有另外三种效果: 分别是BehindMotion, ScrollMotion, StretchMotion
          // 滑动出来的widget
          children: [
            SlidableAction(
              onPressed: (_) {
                // TODO
              },
              backgroundColor: Colors.red,
              icon: Icons.delete,
              label: '删除',
            )
          ],
        ),
        // 显示的widget
        child: SizedBox(
          width: double.infinity,
          height: 80,
          child: Row(
            children: [
              SizedBox(width: 14),
              ClipOval(
                child:
                    Image.network(图片地址, width: 60, height: 60),
              ),
              SizedBox(width: 14),
              Expanded(
                  child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text('ccc',
                          style: TextStyle(
                              color: const Color(0xFF222324),
                              fontSize: 16,
                              fontWeight: FontWeight.bold)),
                      Text('2021/11/25',
                          style: TextStyle(
                              color: const Color(0xFF999999), fontSize: 14)),
                    ],
                  ),
                  SizedBox(height: 6),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Expanded(
                          child: Text(
                        '111' * 20,
                        style: TextStyle(
                            color: const Color(0xFF222324), fontSize: 14),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      )),
                      SizedBox(width: 20),
                      Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          color: Colors.red,
                        ),
                        padding: const EdgeInsets.symmetric(
                            horizontal: 6, vertical: 2),
                        child: Text(
                          '30',
                          style: TextStyle(
                              color: const Color(0xFFFFFFFF), fontSize: 10),
                        ),
                      )
                    ],
                  )
                ],
              )),
              SizedBox(width: 14),
            ],
          ),
        )
    )
}