Flutter Dismiss 篇 - Dart

Flutter Dismiss 组件允许您使用简单的手势进行滑动操作和删除操作。它是一个用于在 UI 中删除项目的可滑动小组件。在本篇文章中我们将学习如何使用 Flutter Dismiss 组件来实现删除按钮。

使用步骤

步骤 1

首先,让我们从在 pubspec.yaml 文件中的导入它开始：

dependencies:
  flutter:
    sdk: flutter
  swipe_to: ^1.0.0

步骤 2

现在,导入我们的 Dismissable 组件：

import 'package:flutter/material.dart';

步骤 3

接下来,在 build 方法中,创建一个 ListView :

ListView(
  children: _items.map((item) {
    return Dismissible(
      key: UniqueKey(),
      direction: DismissDirection.endToStart,
      child: ListTile(title: Text(item)),
      onDismissed: (_) => _removeItem(item),
      background: Container(
          color: Colors.red,
          child: Align(
              alignment: Alignment.centerRight,
              child: Padding(
                  padding: EdgeInsets.only(right: 10),
                  child: Icon(
                    Icons.delete_forever,
                    color: Colors.white,
                  )))),
    );
  }).toList(),
);

步骤 4

现在实现 _removeItem 方法：

void _removeItem(String item) {
  setState(() {
    _items.remove(item);
  });
}

在这里,我们简单地从 _items 去除了选定的元素。

步骤 5

完成啦！再来一次最终的代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final _items = [
    'Pizza',
    'Burger',
    'Pasta',
    'Sandwich',
    'Hot dogs',
    'Donuts',
    'Ice cream'
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Dismiss',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Dismiss'),
        ),
        body: ListView(
          children: _items.map((item) {
            return Dismissible(
              key: UniqueKey(),
              direction: DismissDirection.endToStart,
              child: ListTile(title: Text(item)),
              onDismissed: (_) => _removeItem(item),
              background: Container(
                  color: Colors.red,
                  child: Align(
                      alignment: Alignment.centerRight,
                      child: Padding(
                          padding: EdgeInsets.only(right: 10),
                          child: Icon(
                            Icons.delete_forever,
                            color: Colors.white,
                          )))),
            );
          }).toList(),
        ),
      ),
    );
  }

  void _removeItem(String item) {
    setState(() {
      _items.remove(item);
    });
  }
}

嗨呀！这就完成了。请享受使用 Flutter Dismiss 组件的编码 :)