Flutter :拖拽排序 ReorderableListView

Flutter 专栏收录该内容
33 篇文章 0 订阅

ReorderableListView是通过长按拖动某一项到另一个位置来重新排序的列表组件。

使用:下面实现功能为:头部“新增收藏夹”不动,下面cell可以拖拽排序
在这里插入图片描述

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:trade_app/base/baseColor.dart';
import 'package:trade_app/base/baseSize.dart';
import 'package:trade_app/base/baseTextStyle.dart';
import 'package:trade_app/pages/utils/icon_utils.dart';

class FavoritesManagementPage extends StatefulWidget {
  @override
  FavoritesManagementPageState createState() => FavoritesManagementPageState();
}

class FavoritesManagementPageState extends State<FavoritesManagementPage> {
  List list = ['一级商户价签', '二级商户价签', '三级商户价签', '四级商户价签'];

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

  @override
  void dispose() {
    super.dispose();
  }

  _onReorder(int oldIndex, int newIndex) {
    print('oldIndex: $oldIndex , newIndex: $newIndex');
    setState(() {
      if (newIndex == list.length) {
        newIndex = list.length - 1;
      }
      var item = list.removeAt(oldIndex);
      list.insert(newIndex, item);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        brightness: Brightness.light,
        leading: IconButton(
            icon: Image.asset(IconUtils.getIconPath('fanhui')),
            onPressed: () => Navigator.pop(context)),
        title: Text(
          '收藏夹管理',
          style: TextStyle(color: BaseColor.colorFF262626, fontSize: 18),
        ),
        backgroundColor: Colors.white,
      ),
      body: ReorderableListView(
        header: cellManageHead(),
        children: list.map((e) => cellManage(e)).toList(),
        onReorder: _onReorder,
      ),
      backgroundColor: BaseColor.colorFFF5F5F5,
    );
  }
}

Widget cellManage(String name) {
  return Container(
    key: ValueKey(name),
    margin: EdgeInsets.only(
        left: BaseSize.dp(15),
        right: BaseSize.dp(15),
        top: BaseSize.dp(8),
        bottom: BaseSize.dp(8)),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(8),
      color: Colors.white,
    ),
    height: BaseSize.dp(48),
    child: Row(
      children: <Widget>[
        SizedBox(width: BaseSize.dp(12)),
        ImageIcon(
          IconUtils.getAssetIcon('ic_fold_edit'),
          color: BaseColor.colorFF03B798,
        ),
        SizedBox(width: BaseSize.dp(6)),
        Text(
          name,
          style: BaseTextStyle.style333333_15,
        )
      ],
    ),
  );
}

Widget cellManageHead() {
  return Container(
    margin: EdgeInsets.only(
        left: BaseSize.dp(15),
        right: BaseSize.dp(15),
        top: BaseSize.dp(16),
        bottom: BaseSize.dp(8)),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(8),
      color: Colors.white,
    ),
    height: BaseSize.dp(48),
    child: Row(
      children: <Widget>[
        SizedBox(width: BaseSize.dp(12)),
        ImageIcon(
          IconUtils.getAssetIcon('ic_fold_add'),
          color: BaseColor.colorFF03B798,
        ),
        SizedBox(width: BaseSize.dp(6)),
        Text(
          '新增收藏夹',
          style: BaseTextStyle.style333333_15,
        )
      ],
    ),
  );
}

在Column中嵌套ReorderableListView,时需要使用Expanded Widget 包装ReorderableListView

body: Column(
        children: <Widget>[
          Text('哈哈哈'),
          Expanded(
              child: ReorderableListView(
            header: cellManageHead(),
            children: list.map((e) => cellManage(e)).toList(),
            onReorder: _onReorder,
          ))
        ],
      ),
  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

<p> <b><span style="background-color:#FFE500;">【超实用课程内容】</span></b> </p> <p> <br /> </p> <p> <br /> </p> <p> 本套视频目标从UI分类开始讲起,结合网易新闻功能点实例讲解每一大类组件布局的使用。最后以一个完整的仿网易新闻的UI实战讲解,教会大家如何合理选择UI组件,并且使用组件快速实现我们的需求,完成一个完整的Flutter项目。 </p> <p> <br /> </p> <p> <br /> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><span style="background-color:#FFE500;">【课程如何观看?】</span></b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> PC端:<a href="https://edu.csdn.net/course/detail/26277"></a><a href="https://edu.csdn.net/course/detail/26150"></a><a href="https://edu.csdn.net/course/detail/26150"></a><a href="https://edu.csdn.net/course/detail/27286"></a><a href="https://edu.csdn.net/course/detail/26858">https://edu.csdn.net/course/detail/26858</a> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 移动端:CSDN 学院APP(注意不是CSDN APP哦) </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 本课程为录播课,课程永久有效观看时长,大家可以抓紧时间学习后一起讨论哦~ </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <br /> </p> <p> <br /> </p>
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值