flutter删除listView中的item

先看下删除效果:

实现也很简单,就是在点击事件中,从数据源中删除一个项目即可,但是需要记住更新状态。

items.removeAt(index);
setState(() {});

整体代码如下:

import 'package:flutter/material.dart';

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

//MyApp不需要做状态处理,所以此组件继承StatelessWidget即可
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(
          title: 'Flutter Demo Home Page',
          items: List<String>.generate(20, (i) => "Item ${i + 1}")),
    );
  }
}

//主页需要继承自StatefulWidget
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title, this.items}) : super(key: key);

  final String title;
  final List<String> items;

  //必需重写createState方法
  @override
  _MyHomePageState createState() => new _MyHomePageState(items);
}

//状态类必需继承State类,注意后面需要指定为<MyHomePage>
class _MyHomePageState extends State<MyHomePage> {
  List<String> items;

  _MyHomePageState(this.items);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          final item = items[index];
          return GestureDetector(
              onTap: () {
                items.removeAt(index);
                setState(() {});
              },
              child: new ListTile(
                title: new Text("$item"),
              ));
        },
      ),
    );
  }
}
发布了189 篇原创文章 · 获赞 81 · 访问量 21万+

猜你喜欢

转载自blog.csdn.net/cpcpcp123/article/details/97659257