flutter ListView做侧滑显示按钮，点击按钮后删除

创建ListView

首先，我们需要创建一个ListView来显示数据。我们可以使用ListView.builder构造函数来动态构建列表项。在这个例子中，我们只需要一个简单的字符串列表，所以我们可以使用List.generate函数生成一个包含随机字符串的列表。

final List<String> items = List.generate(20, (index) => 'Item $index');

ListView.builder(
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
);

添加侧滑按钮

接下来，我们需要添加一个侧滑按钮。Flutter提供了一个Dismissible widget，可以帮助我们轻松地添加侧滑删除功能。我们可以将Dismissible widget放在ListView的itemBuilder中，然后在Dismissible widget的child属性中放置我们的列表项。

ListView.builder(
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return Dismissible(
      key: Key(items[index]), // 必须设置key
      child: ListTile(
        title: Text(items[index]),
      ),
      background: Container(
        color: Colors.red,
        child: Icon(Icons.delete),
        alignment: Alignment.centerRight,
        padding: EdgeInsets.only(right: 20),
      ),
      direction: DismissDirection.endToStart,
      onDismissed: (direction) {
        setState(() {
          items.removeAt(index);
        });
      },
    );
  },
);

在这里，我们将Dismissible widget的background属性设置为一个红色的容器，其中包含一个删除图标。我们还将alignment和padding属性设置为使图标居中并向右偏移20个像素。

完整代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter ListView Swipe to Delete',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> items = List.generate(20, (index) => 'Item $index');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter ListView Swipe to Delete'),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
          return Dismissible(
            key: Key(items[index]),
            child: ListTile(
              title: Text(items[index]),
            ),
            background: Container(
              color: Colors.red,
              child: Icon(Icons.delete),
              alignment: Alignment.centerRight,
              padding: EdgeInsets.only(right: 20),
            ),
            direction: DismissDirection.endToStart,
            onDismissed: (direction) {
              setState(() {
                items.removeAt(index);
              });
            },
          );
        },
      ),
    );
  }
}

这就是如何使用ListView和Dismissible widget实现侧滑删除的全部内容。希望这篇文章对你有所帮助！