先看下删除效果:
实现也很简单,就是在点击事件中,从数据源中删除一个项目即可,但是需要记住更新状态。
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.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 items;
//必需重写createState方法
@override
_MyHomePageState createState() => new _MyHomePageState(items);
}
//状态类必需继承State类,注意后面需要指定为
class _MyHomePageState extends State {
List 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"),
));
},
),
);
}
}