Flutter原生侧滑删除组件Dismissible

Dismissible:https://docs.flutter.io/flutter/widgets/Dismissible-class.html

基本步骤:

(1)创建一个State全局的List变量
(2)用Dismissible包装每一个item
(3)设置Dismissible的background,提供删除时的UI显示

import 'package:flutter/material.dart';

class DismissibleDemoPage extends StatefulWidget {
  
  State<StatefulWidget> createState() => new _DismissibleDemoPagePageState();
}

// 侧滑删除列表界面
class _DismissibleDemoPagePageState extends State<DismissibleDemoPage> {
  final items = List<String>.generate(10, (i) => "Item $i");

  
  void initState() {
    super.initState();
  }

//  Widget build(BuildContext context) {
//    return Scaffold(
//        appBar: new AppBar(
//          title: new Text('Dismissible Demo'),
//        ),
//      body: ListView.builder(
//          itemCount: items.length,
//          itemBuilder: (context, index) {
//            final item = items[index];
//            return Dismissible(
//              key: Key(item),
//              crossAxisEndOffset: 100.0,
//              onDismissed: (direction) {
//                setState(() {
//                  items.removeAt(index);
//                  print(direction);
//                });
//                Scaffold.of(context)
//                    .showSnackBar(SnackBar(content: Text('remove $item')));
//              },
//              child: ListTile(
//                title: Text('$item'),
//              ),
//              background: Container(
//                color: Colors.red,
//              ),
//            );
//          }),
//    );
//  }

  
  Widget build(BuildContext context) {
    final title = 'Dismissing Items';
    return MaterialApp(
      title: title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Builder(builder: (BuildContext context) {
          return Center(
            child: Stack(
              children: _buildCards(context),
            ));
        }),
      ),
    );
  }

  List<Widget> _buildCards(BuildContext context) {
    var cards = List<Widget>();
    for (String item in items) {
      cards.add(Dismissible(
          key: Key(item),
          background: Container(
            alignment: Alignment.centerRight,
            padding: EdgeInsets.only(right: 16.0),
            color: Colors.red,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Text('Dismiss',
                    style: Theme
                        .of(context)
                        .primaryTextTheme
                        .subhead
                        .copyWith(color: Colors.white)),
                Icon(
                  Icons.delete,
                  color: Colors.white,
                ),
              ],
            ),
          ),
          direction: DismissDirection.endToStart,
          child: Container(
            alignment: Alignment.centerLeft,
            color: Colors.blue,
            height: 50.0,
            width: 200.0,
            child: Text(item),
          ),
          // Each Dismissible must contain a Key. Keys allow Flutter to uniquely identify Widgets.
          // key: Key(item), We also need to provide a function that tells our app
          // what to do after an item has been swiped away.
          onDismissed: (direction) {
            // Remove the item from our data source.
            setState(() {
              items.remove(item);
            });
            Scaffold
                .of(context)
                .showSnackBar(SnackBar(content: Text("$item dismissed")));
          }));
    }

    return cards;
  }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值