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
    评论
Flutter是一种跨平台的移动应用开发框架,可以使用Dart语言编写代码,并在AndroidiOS等多个平台上运行。在Flutter中,可以使用原生视图进行开发,以便实现更高级的功能或满足特定的需求。 拷贝原生视图是指将原生平台上的视图组件(如Android上的View或iOS上的UIView)复制到Flutter应用中使用。这样做的好处是可以充分利用原生平台的特性和功能,同时保持Flutter应用的跨平台性。 在Flutter中进行原生视图的拷贝,通常需要使用Flutter提供的插件或包来实现。这些插件或包可以帮助开发者将原生视图嵌入到Flutter应用中,并提供访问原生平台的接口。 具体的操作步骤可能会因为不同平台和插件的差异而有所不同,但一般来说,大致可以分为以下几个步骤: 1. 导入插件或包:根据所需的功能和平台选择合适的插件或包,并在Flutter项目中导入。 2. 配置插件或包:根据需要,配置插件或包,并在Flutter项目的主配置文件中进行必要的设置。 3. 创建原生视图:使用插件或包提供的方法,在Flutter应用的代码中创建原生视图对应的组件,并指定需要传递给原生平台的参数和回调函数。 4. 添加原生视图:将创建的原生视图组件添加到Flutter应用的界面中的适当位置,以便显示和使用。 5. 处理交互:根据需要,实现与原生视图的交互,包括接收原生平台传递的事件和数据,并根据业务逻辑进行处理。 需要注意的是,在使用原生视图的同时,还需要兼顾Flutter框架的特性和约束,确保原生视图与Flutter应用其他部分的协调和一致性。 通过拷贝原生视图,我们可以在Flutter应用中实现更复杂、更灵活的功能,同时利用Flutter框架的优势,实现跨平台的移动应用开发。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值