flutter ListView做侧滑显示按钮删除
Flutter ListView组件不支持侧滑显示按钮删除,但是可以通过使用Dismissible组件来实现侧滑删除。
Dismissible组件是一个可滑动的组件,当用户滑动它时,它会在屏幕上滑动并触发一个回调函数。在这个回调函数中,可以删除该组件的数据,然后刷新列表。
以下是一个简单的例子,演示了如何使用Dismissible组件实现侧滑删除:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> _items = List.generate(20, (index) => 'Item $index');
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Dismissible Demo'),
),
body: ListView.builder(
itemCount: _items.length,
itemBuilder: (context, index) {
final item = _items[index];
return Dismissible(
key: Key(item),
onDismissed: (direction) {
setState(() {
_items.removeAt(index);
});
},
background: Container(
color: Colors.red,
child: Icon(Icons.delete, color: Colors.white),
alignment: Alignment.centerRight,
padding: EdgeInsets.only(right: 20),
),
child: ListTile(
title: Text(item),
),
);
},
),
);
}
}
在这个例子中,我们创建了一个包含20个项的列表。每个项都是一个Dismissible组件,它们可以被滑动删除。当用户滑动Dismissible组件时,它会调用onDismissed回调函数,该函数会从列表中删除该项,并在屏幕上刷新列表。
我们还定义了一个background属性,它是一个红色的Container,内部包含一个白色的删除图标。这个background属性会在Dismissible组件被滑动时显示出来,提示用户可以删除该项。
注意,在Dismissible组件中,我们需要为每个项指定一个唯一的key属性。这个key属性通常是从数据中获取的,这样可以确保每个Dismissible组件都有一个唯一的标识符,以便在删除它时能够正确地更新列表。
这只是一个简单的例子,但是它演示了如何使用Dismissible组件实现侧滑删除。你可以根据你的需要自定义background属性,以及在onDismissed回调函数中执行其他操作,例如向服务器发送请求,以确保数据的一致性。
原文地址: https://www.cveoy.top/t/topic/fLE 著作权归作者所有。请勿转载和采集!