美文网首页Flutter开发圈
Flutter Dismissible list 滑动消失效果

Flutter Dismissible list 滑动消失效果

作者: 菜鸟何时起飞 | 来源:发表于2019-06-16 00:06 被阅读0次

    background:向右或者向下滑动时显示
    secondaryBackground:向左或者向上滑动时显示
    如果只设置background 向哪边滑动都显示background
    基本使用

    
    class _DismissedAppPageState extends State<DismissedAppPage> {
      List<String> list = [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L'
      ];
    
      _showSnakeBar(String str) {
        final snackBar = new SnackBar(content: new Text(str));
        Scaffold.of(context).showSnackBar(snackBar);
      }
    
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return new Scaffold(
          appBar: new AppBar(
            title: new Text('Dismissed 学习'),
            centerTitle: true,
          ),
          body: new ListView.builder(
              itemCount: list.length,
              itemBuilder: (context, index) {
                final String curItem = list[index];
    
                return new Dismissible(
                    key: new Key(curItem),
                    direction: DismissDirection.startToEnd,/*定义滑动的方向*/
                    onDismissed: (direction) {
                      list.removeAt(index);
                      _showSnakeBar("$curItem 被划走了");
                    },
                    background: new Container(
                        child: new Center(
                          child: new Text('即将被删除'),
                        ),
                        color: Colors.red),/*设置滑动时底部显示的内容*/
                    secondaryBackground:new Container(
                        child: new Center(
                          child: new Text('secondaryBackground'),
                        ),
                        color: Colors.red
                    ),
                    child: new ListTile(
                      title: new Text(curItem),
                    ));
              }),
        );
      }
    }
    

    效果图


    f5b2d363d5e65e002ed274a0d230d09.png

    相关文章

      网友评论

        本文标题:Flutter Dismissible list 滑动消失效果

        本文链接:https://www.haomeiwen.com/subject/wxfwfctx.html