Flutter：滑动删除

使用flutter_slidable: ^4.0.3完成滑动删除效果

import 'package:demo/common/index.dart';
import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
import 'package:demo/pages/web3/assets/token_list/index.dart';
import 'package:demo/pages/web3/manage/wallet_list/index.dart';
import 'index.dart';


class HomePage extends GetView<HomeController> {
  const HomePage({super.key});

  // 资产列表
  Widget _buildAssetList() {
    return SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return _buildAssetItem(index);
        },
        childCount: controller.assetList.length,
      ),
    );
  }

  // 资产item（使用 Slidable 实现右滑删除）✅
  Widget _buildAssetItem(int index) {
    final asset = controller.assetList[index];
    
    return Slidable(
      // 唯一标识（必须）
      key: Key('asset_${asset['id']}'),
      // 分组标签：同一组内的 Slidable 互斥，同时只能打开一个 ✅
      groupTag: 'asset_list',
      // 结束操作面板（从右向左滑动显示）
      endActionPane: ActionPane(
        // 滑动动画
        motion: const ScrollMotion(),
        // 控制滑动距离（0.0-1.0，0.2 表示滑动 20% 的宽度）✅
        // 可以根据需要调整这个值来控制删除按钮显示的距离
        extentRatio: 0.2,
        // 删除按钮
        children: [
          CustomSlidableAction(
            flex: 1,
            backgroundColor: Colors.red,
            onPressed: (context) async {
              controller.deleteAsset(index);
            },
            child: Container(
              alignment: Alignment.center,
              child: const Icon(
                Icons.delete,
                color: Colors.white,
                size: 28,
              ),
            ),
          ),
        ],
      ),
      // 子组件（资产项内容）
      child: <Widget>[
        // 代币信息
        ImgWidget(
            path: 'assets/web3/bnb_ac.png',
            width: 70.w,
            height: 70.w,
          ).marginOnly(right: 20.w),
        <Widget>[
          <Widget>[
            TextWidget.body(asset['symbol'] ?? '',size: 16,weight: FontWeight.w600),
            SizedBox(height: 10.w),
            <Widget>[
              const TextWidget.body('\$0',size: 12,color: AppTheme.color666,),
              const SizedBox(width: 10),
              const TextWidget.body('0.00%',size: 12,color: AppTheme.colorRed,),
            ].toRow()
          ].toColumn(crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.center),
          // 价格
          <Widget>[
            const TextWidget.body('0',size: 16,color: AppTheme.color666,weight: FontWeight.w600),
            SizedBox(height: 10.w),
            const TextWidget.body('\$0',size: 12,color: AppTheme.color666,),
          ].toColumn(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.end).paddingOnly(right: 30.w),
        ].toRow(mainAxisAlignment: MainAxisAlignment.spaceBetween).border(bottom: 1,color: AppTheme.dividerColor).expanded(),
      ]
          .toRow(mainAxisAlignment: MainAxisAlignment.spaceBetween,)
          .paddingOnly(left: 30.w)
          .tight(height: 120.w)
          .clipRRect(all: 20.w),
    );
  }
  
  // 主视图
  Widget _buildView() {
    return SlidableAutoCloseBehavior(
      // 包裹整个列表，使同一 groupTag 的 Slidable 互斥 ✅
      child: CustomScrollView(
        slivers: [
          _buildAssetList(),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<HomeController>(
      init: HomeController(),
      id: "home",
      builder: (_) {
        return Scaffold(
          backgroundColor: AppTheme.pageBgColor,
          body: _buildView(),
        );
      },
    );
  }
}

控制器

import 'package:lingoaix/common/index.dart';
import 'package:get/get.dart';

class HomeController extends GetxController {
  HomeController();
  
  // 资产列表数据（示例数据）
  List<Map<String, dynamic>> assetList = [
    {'id': 1, 'symbol': 'BNB',},
    {'id': 2, 'symbol': 'USDT',},
    {'id': 3, 'symbol': 'ETH',},
    {'id': 4, 'symbol': 'BTC',},
    {'id': 5, 'symbol': 'SOL',},
    {'id': 6, 'symbol': 'DOGE',},
    {'id': 7, 'symbol': 'XRP',},
    {'id': 8, 'symbol': 'ADA',},
    {'id': 9, 'symbol': 'DOT',},
    {'id': 10, 'symbol': 'LINK',},
  ];


  /// 删除资产项 ✅
  void deleteAsset(int index) {
    if (index >= 0 && index < assetList.length) {
      assetList.removeAt(index);
      update(["home"]);
      Log.d('删除资产项: $index');
    }
  }

}