Flutter Dismissible

Flutter Dismissible实现滑动删除，滑动删除模式在很多移动应用中很常见。例如，我们在整理手机通讯录时，希望能快速删除一些联系人，一般用手指轻轻一滑即可以实现删除功能。

Flutter提供了Dismissible组件，可使这项任务变得简单。Dismissible组件属性见表：

接下来编写一个示例，可以删除列表中的某一项数据。其中关键的部分是列表项需要使用Dismissible包裹。完整的示例代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: '滑动删除示例',
    home: new MyApp(),
  ));
}

class MyApp extends StatelessWidget {

  // 构建30条列表数据
  List<String> items = new List<String>.generate(30, (i) => "列表项 ${i + 1}");

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('滑动删除示例'),
      ),
      // 构建列表
      body: new ListView.builder(
        itemCount: items.length,                  //指定列表长度
        itemBuilder: (context, index) {         //构建列表

          // 提取出被删除的项
          final item = items[index];

          // 返回一个可以被删除的列表项
          return new Dismissible(
                key: new Key(item),
                // 被删除回调
                onDismissed: (direction) {
                  // 移除指定索引项
                  items.removeAt(index);
                  // 底部弹出消息提示当前项被删除了
                  Scaffold.of(context).showSnackBar(
                      new SnackBar(content: new Text("$item被删除了")));
                    },
                    child: new ListTile(title: new Text('$item'),)
                );
              },
            ),
          );
      }
    }

上述示例代码展示了一个列表，如图所示，其中图A中“列表项5”还在。当用户滑动删除了此项，屏幕底部会弹出一个提示“列表项5被删除了”，如图B所示：

酷客教程相关文章：

• Flutter 按宽高自动换行布局
• Flutter 控制是否显示组件
• Flutter 基准线布局
• Flutter 矩阵转换