Flutter中点击删除按钮如何移除ListView的对应列表项？

要实现点击删除按钮移除对应列表项，核心是要处理状态变化和数据源的动态更新——你当前用的StatelessWidget无法维护动态状态，所以需要做以下关键修改：

修改后的完整代码 #

class MyTabView extends StatefulWidget {
  // 保留你原有的构造函数或参数
  // ...

  @override
  State<MyTabView> createState() => _MyTabViewState();
}

class _MyTabViewState extends State<MyTabView> {
  // 定义可变的列表数据源，替代固定的25条数据
  late List<String> _listItems;

  @override
  void initState() {
    super.initState();
    // 生成初始的25条列表数据，和你原逻辑一致
    _listItems = List.generate(25, (index) => '${titles[0]} $index');
  }

  @override
  Widget build(BuildContext context) {
    // ...

    return TabBarView(
      children: <Widget>[
        ListView.builder(
          // 绑定数据源长度作为列表项总数
          itemCount: _listItems.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              title: Row(
                children: [
                  Expanded(
                    child: Text(
                      _listItems[index],
                      style: const TextStyle(fontSize: 16),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      // 删除对应索引的元素，并触发UI刷新
                      setState(() {
                        _listItems.removeAt(index);
                      });
                    },
                    child: const Icon(Icons.delete),
                  ),
                ],
              ),
            );
          },
        ),
        // ...
      ],
    );
  }
}

核心修改点说明 #

• 转为StatefulWidget：只有状态组件能通过setState()触发UI重建，响应数据的动态变化。
• 使用可变数据源：用List<String> _listItems存储列表内容，替代原来固定的25条数据，删除操作直接修改这个列表。
• 绑定列表长度：将itemCount从固定值改为_listItems.length，确保列表长度随数据源自动调整。
• 删除逻辑实现：在删除按钮的点击回调中，通过setState()包裹removeAt(index)操作，通知Flutter重新渲染ListView，更新显示内容。

如果你的titles是动态传入的参数，可在didUpdateWidget方法中同步更新_listItems，避免数据不一致。

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