flutter书架形式格口的动态创建（行、列数，是否全选的配置）

根据传入的行列数创建不同格口数量的书架
左图：5行3列、右图：3行3列
在这里插入图片描述在这里插入图片描述
代码

import 'package:jade/bean/experienceStation/ExpCellSpecsBean.dart';
import 'package:jade/configs/PathConfig.dart';
import 'package:jade/utils/DialogUtils.dart';
import 'package:jade/utils/JadeColors.dart';
import 'package:jade/utils/Utils.dart';
import 'package:util/navigator_util.dart';
import 'package:widget/custom_appbar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class ExperienceStationCreateCellSpecsSet extends StatefulWidget{

  final int rowCount; //行数
  final int columnCount; //列数
  const ExperienceStationCreateCellSpecsSet({this.rowCount,this.columnCount});

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _ExperienceStationCreateCellSpecsSet();
  }
}

class _ExperienceStationCreateCellSpecsSet extends State<ExperienceStationCreateCellSpecsSet>{

  String _latticeImage = PathConfig.imageLatticeCenter;
  List<List<ExpCellSpecsBean>> _expCellSpecsList = [];

  //判断全选
  static bool _isSelectAll = false;

  //判断是否是全选或批量设置状态
  bool _isSelectAllBatch = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _setList();
  }




  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: JadeColors.lightGrey,
      appBar: CustomAppBar(
        backgroundColor: Colors.white,
        elevation: 0.2,
        leading: GestureDetector(
          onTap: () {
            Navigator.pop(context);
          },
          child: Icon(Icons.arrow_back_ios),
        ),
        iconTheme: IconThemeData(color: Color(0xff999999)),
        title: Text(
          '格口规格',
          style: TextStyle(color: Colors.black),
        ),
        centerTitle: true,
      ),
      body: _body(),
    );
  }

  _body(){
    return Container(
      margin: EdgeInsets.only(top: 100.w,left: 50.w),
      child: Column(
        children: [
          _selectBtnView(),
          _bookRackView(),
          _sureBtn()
        ],
      )
    );
  }

  _selectBtnView(){
    return Row(
      children: [
        GestureDetector(
          child: Container(
            height: 45.w,
            padding: EdgeInsets.symmetric(horizontal: 20.w),
            alignment: Alignment.center,
            margin: EdgeInsets.only(right: 30.w),
            decoration: BoxDecoration(
              color: _judgeSelectAll() ? JadeColors.grey_10 : JadeColors.blue_2,
              borderRadius: BorderRadius.circular(10)
            ),
            child: Text(_judgeSelectAll() ? '取消':'全选',style: TextStyle(color: Colors.white,fontSize: 22.sp),),
          ),
          onTap: (){
            _setSelectAll();
          }
        ),
        GestureDetector(
            child: Container(
              height: 45.w,
              alignment: Alignment.center,
              padding: EdgeInsets.symmetric(horizontal: 20.w),
              decoration: BoxDecoration(
                  color: JadeColors.blue_2,
                  borderRadius: BorderRadius.circular(10)
              ),
              child: Text('批量设置',style: TextStyle(color: Colors.white,fontSize: 22.sp),),
            ),
            onTap: (){
              DialogUtils().fillInCellInfoDialog(context,
                  sureCallBack: (result) {
                    ExpCellSpecsBean resultBean = result;
                    ///todo 循环赋给选中的格口
                    //_expCellSpecsList[row][column]
                    setState(() {});
                  });
            }
        )
      ],
    );
  }

  _bookRackView(){
    return Container(
      margin: EdgeInsets.only(top: 40.w,bottom: 40.w),
      width: Utils().screenWidth(context)- 60.w,
      height: Utils().screenHeight(context) * 0.6,
      child: InteractiveViewer(
          constrained: false,
          scaleEnabled: false,
          child: Table(
            columnWidths: <int, TableColumnWidth>{
              for (int column = 0; column < widget.columnCount; column += 1)
                column: const FixedColumnWidth(110),
            },
            children: buildRows(widget.rowCount, widget.columnCount),
          )
      ),
    );
  }

  List<TableRow> buildRows(int rowCount, int columnCount) {
    return [
      for (int row = 0; row < rowCount; row += 1)
        TableRow(
          children: [
            for (int column = 0; column < columnCount; column ++)
              InkWell(
                child: Container(
                  height: 190.w,
                  decoration: BoxDecoration(
                    image:DecorationImage(
                      image: AssetImage(_setLatticeImage(row,column)),
                      fit: BoxFit.fill, // 完全填充
                    ),
                  ),
                  child: Stack(
                    children: [
                      Container(
                          alignment: Alignment.center,
                          margin: EdgeInsets.only(
                            top: row == widget.rowCount -1 ? 0 : 30.w,
                            left: column == 0 ? 30.w : 0,
                            right: column == widget.columnCount -1 ? 20.w : 0,
                          ),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              GestureDetector(
                                child: Container(
                                  padding: EdgeInsets.only(left: 20.w,right: 20.w,top: 6.w,bottom: 6.w),
                                  decoration: BoxDecoration(
                                    color: _isCellFillInfo(_expCellSpecsList[row][column]) ? JadeColors.blue_2 : Colors.white38,
                                    borderRadius: BorderRadius.circular(20),
                                    border: Border.all(width: 1,color: JadeColors.blue_2)
                                  ),
                                  child: Text(_isCellFillInfo(_expCellSpecsList[row][column]) ? '查看尺寸':'填写尺寸',
                                    style: TextStyle(color: _isCellFillInfo(_expCellSpecsList[row][column]) ? Colors.white : JadeColors.blue_2,fontSize: 24.sp),),
                                ),
                                onTap: (){
                                  DialogUtils().fillInCellInfoDialog(context,
                                      viewedExpCellSpecsBean: _isCellFillInfo(_expCellSpecsList[row][column])
                                            ? _expCellSpecsList[row][column]
                                            : null,
                                      sureCallBack: (result) {
                                      ExpCellSpecsBean resultBean = result;
                                      _expCellSpecsList[row][column].cellHeight = resultBean.cellHeight;
                                      _expCellSpecsList[row][column].cellWidth = resultBean.cellWidth;
                                      _expCellSpecsList[row][column].cellDepth = resultBean.cellDepth;
                                      _expCellSpecsList[row][column].cellPic = resultBean.cellPic;
                                      print('填写后的回填：${_expCellSpecsList[row][column].toJson()}');
                                      setState(() {});
                                    });
                                  }
                              ),
                              SizedBox(height: 10.w),
                              GestureDetector(
                                  child: Container(
                                    padding: EdgeInsets.only(left: 20.w,right: 20.w,top: 6.w,bottom: 6.w),
                                    decoration: BoxDecoration(
                                        color: _expCellSpecsList[row][column].cellPublishStatus == 1 ? Colors.white38 : JadeColors.blue_2,
                                        borderRadius: BorderRadius.circular(20),
                                        border: Border.all(width: 1,color: JadeColors.blue_2)
                                    ),
                                    child: Text(_expCellSpecsList[row][column].cellPublishStatus == 1 ? '下架格口' : '上架格口',
                                      style: TextStyle(color: _expCellSpecsList[row][column].cellPublishStatus == 1 ? JadeColors.blue_2 : Colors.white,fontSize: 24.sp),),
                                  ),
                                  onTap: (){
                                    if(_expCellSpecsList[row][column].cellPublishStatus == 1){
                                      DialogUtils().commonDescDialog(context,
                                          descTitle: '下架格口',
                                          desc: '下架后该格口将不能进行交易、售卖。',
                                          showCancel: true,
                                          sureBtnText: '确认下架',
                                          sureBtnTextColor: JadeColors.grey_2,
                                          callback: (){
                                            setState(() {
                                              _expCellSpecsList[row][column].cellPublishStatus = 0;
                                            });
                                          }
                                      );
                                    }else{
                                      setState(() {
                                        _expCellSpecsList[row][column].cellPublishStatus = 1;
                                      });
                                    }

                                  }
                              ),
                            ],
                          )
                      ),
                      GestureDetector(
                        child: Container(
                          padding: EdgeInsets.only(left: 2,top: 1,right: 5,bottom: 5),
                          color: Colors.transparent,
                          child: Container(
                            width: 36.w,
                            height: 36.w,
                            alignment: Alignment.center,
                            margin: EdgeInsets.only(top: 14.w,left: 10.w),
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(4),
                                border: Border.all(width: 1.w,color: Colors.white),
                                color: _expCellSpecsList[row][column].isSelected ? JadeColors.blue_2 : JadeColors.translucent
                            ),
                            child: _expCellSpecsList[row][column].isSelected ? Image.asset(PathConfig.iconCheckWhite,width: 20.w,height: 20.w) : Text('${_expCellSpecsList[row][column].num}',style: TextStyle(color: Colors.white,fontSize: 15.sp,fontWeight: FontWeight.bold)),
                          ),
                        ),
                        onTap: (){
                          setState(() {
                            _expCellSpecsList[row][column].isSelected = !_expCellSpecsList[row][column].isSelected;
                          });
                          _isSelectAll = _judgeSelectAll();
                        }
                      )
                    ],
                  ),
                ),
                onTap: (){},
              )
          ],
        ),
    ];
  }

  String _setLatticeImage(row,column){
    if(row == 0 && column == 0){
      //左上角
      _latticeImage = PathConfig.imageLatticeTopLeft;

    }else if(row == 0 && column == widget.columnCount-1){
      //右上角
      _latticeImage = PathConfig.imageLatticeTopRight;

    }else if(row == widget.rowCount -1 && column == 0){
      //左下角
      _latticeImage = PathConfig.imageLatticeBottomLeft;
    }else if(row == widget.rowCount -1 && column == widget.columnCount-1){
      //右下角
      _latticeImage = PathConfig.imageLatticeBottomRight;
    }else if(column==0){
      _latticeImage = PathConfig.imageLatticeSecondLeft;
    }else if(column== widget.columnCount-1){
      _latticeImage = PathConfig.imageLatticeSecondRight;
    }else if(row == widget.rowCount -1){
      _latticeImage = PathConfig.imageLatticeSecondBottom;
    }else {
      _latticeImage = PathConfig.imageLatticeCenter;
    }

    return _latticeImage;
  }

  _sureBtn(){
    return GestureDetector(
      child: Container(
        height: 80.w,
        width: Utils().screenWidth(context) * 0.6,
        alignment: Alignment.center,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(50),
            color: JadeColors.blue_2,
            boxShadow: [BoxShadow(color: JadeColors.blue_8,blurRadius: 3.0,offset: Offset(0.0, 3.0),)]
        ),
        child: Text('确定',style: TextStyle(color: Colors.white,fontSize: 34.sp,fontWeight: FontWeight.w600)),
      ),
      onTap: (){
        NavigatorUtil.pop(value: _expCellSpecsList);
      }
    );
  }

  //根据行数、列数配置初始二维数组
  _setList(){
    for (int i = 0; i < widget.rowCount; i++) {
      // 对于每一行，创建一个新的列表来存放该行的列数据
      List<ExpCellSpecsBean> rowData = [];
      // 在该行的每一列中添加数据
      for (int j = 0; j < widget.columnCount; j++) {
        //计算序号
        int _number = (i * widget.columnCount) + (j + 1);
        ExpCellSpecsBean cellSpecs = ExpCellSpecsBean(
            num: _number
        );
        // 将该数据添加到当前行的列表中
        rowData.add(cellSpecs);
      }
      // 将当前行的列表添加到总列表中
      _expCellSpecsList.add(rowData);
    }

    for (var row in _expCellSpecsList) {
      for (var cell in row) {
        print('Cell number: ${cell.num}'); // 输出每个CellsBean的序号
      }
    }
  }

  //设置全选
  _setSelectAll(){
    for (var row in _expCellSpecsList) {
      for (var cell in row) {
        if(_isSelectAll){
          cell.isSelected = false;
        }else{
          cell.isSelected = true;
        }
      }
    }
    _isSelectAll = !_isSelectAll;
    setState(() {});
  }

  //判断是否全选
  bool _judgeSelectAll(){
    for (var row in _expCellSpecsList) {
      for (var cell in row) {
        if(!cell.isSelected){
          return false;
        }
      }
    }
    return true;
  }

  //判断某格口是否已填写了尺寸信息
  bool _isCellFillInfo(ExpCellSpecsBean bean){
    if(bean.cellHeight != null || bean.cellWidth != null || bean.cellDepth != null || bean.cellPic != null){
      return true;
    }else{
      return false;
    }
  }

}

调用

var result = await NavigatorUtil.push(ExperienceStationCreateCellSpecsSet(rowCount: state.rowCount,columnCount: state.columnCount));
            if(result != null){
            //TODO处理逻辑
            }

书架格子背景图

1.左上角背景
左上角
2.右上角背景
右上角的
3.左下角背景
在这里插入图片描述
4.右下角背景
在这里插入图片描述
5.中段左侧背景
在这里插入图片描述
6.中段右侧背景
在这里插入图片描述
7.最后一行左下角、右下角中间格子的背景
在这里插入图片描述
8.左上角、右上角中间格子及书架中间部分格子的背景
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/558252.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

深入挖掘C语言 ----动态内存分配

深入挖掘C语言 ----动态内存分配

开篇备忘录: "自给自足的光, 永远都不会暗" 目录 1. malloc和free1.1 malloc1.2 free 2. calloc和realloc2.1 calloc2.2 realloc 3. 总结C/C中程序内存区域划分 正文开始 1. malloc和free 1.1 malloc C语言提供了一个动态开辟内存的函数; void* malloc (size_t s…
阅读更多...
【Flutter】自动生成图片资源索引插件一：FlutterAssetRefGenerator

【Flutter】自动生成图片资源索引插件一：FlutterAssetRefGenerator

介绍 FlutterAssetRefGenerator 插件&#xff1a;windows上 点击生成图片索引按钮后&#xff0c;pubspec.yaml 会出现中文乱码&#xff0c;需要手动改乱码&#xff1b;mac上没问题。 优点&#xff1a;点击图标自动生成。 目录 介绍一、安装二、使用 一、安装 安装FlutterAsset…
阅读更多...
VirtualBox Manjaro Linux(kde)虚拟机扩容 增大硬盘存储空间

VirtualBox Manjaro Linux(kde)虚拟机扩容 增大硬盘存储空间

https://blog.csdn.net/m0_65274357/article/details/131965463 df -h发现/可用空间之后几百M了 文件系统 大小 已用 可用 已用% 挂载点 dev 2.0G 0 2.0G 0% /dev run 2.0G 1.2M 2.0G 1% /run /dev/sda1 40G 37…
阅读更多...
车载终端叉车_车载人脸识别ADAS行为识别解决方案

车载终端叉车_车载人脸识别ADAS行为识别解决方案

智能车载终端的广泛应用为叉车行业注入了新的活力&#xff0c;提升了驾驶安全和效能。通过采用多种验证技术&#xff0c;如指纹、人脸、扫码和刷卡等&#xff0c;智能车载终端实现了对司机操作权限的验证&#xff0c;在叉车启动时能够自动检测安全带的状态。如果驾驶员未系安全…
阅读更多...
OSPF综合大实验

OSPF综合大实验

1、R4为ISP&#xff0c;其上只配置IP地址&#xff1b;R4与其他所直连设备间均使用公有IP&#xff1b; 2、R3-R5、R6、R7为MGRE环境&#xff0c;R3为中心站点&#xff1b; 3、整个OSPF环境IP基于172.16.0.0/16划分&#xff1b;除了R12有两个环回&#xff0c;其他路由器均有一个环…
阅读更多...
短信登录session-redis

短信登录session-redis

1.流程 1.1 发送验证码 模拟路径 http://127.0.0.1:8080/api/user/code?phone1335566 Request Method:POSTcontroller层 /*** 发送手机验证码*/PostMapping("code")public Result sendCode(RequestParam("phone") String phone, HttpSession session) {…
阅读更多...
电机控制专题(二)——Sensorless之扩展反电动势EEMF

电机控制专题(二)——Sensorless之扩展反电动势EEMF

文章目录 电机控制专题(二)——Sensorless之扩展反电动势EEMF前言理论推导仿真验证总结参考文献 电机控制专题(二)——Sensorless之扩展反电动势EEMF 前言 总结下电机控制中的扩展反电动势模型。 纯小白&#xff0c;如有不当&#xff0c;轻喷&#xff0c;还请指出。 在得出E…
阅读更多...
SD-WAN解决电商企业海外业务网络难题

SD-WAN解决电商企业海外业务网络难题

全球化背景下&#xff0c;众多国内企业都涉及到海外贸易业务&#xff0c;尤其是出海电商得到蓬勃发展。企业做出海电商&#xff0c;需要访问国外网页、社交平台&#xff0c;如亚马逊、TikTok、Facebook、YouTube等与客户沟通互动&#xff0c;SD-WAN的发展正好为解决国际网络访问…
阅读更多...
Vue2 移动端（H5）项目封装弹窗组件

Vue2 移动端（H5）项目封装弹窗组件

前言 因vant-ui的dialog组件没有自定义footer插槽 效果 参数配置 1、代码示例&#xff1a; <t-dialog :visible.sync"show" :title"title" submit"submit"></t-dialog>2、配置参数&#xff08;t-dialog Attributes&#xff09; 参…
阅读更多...
吹爆，一款实用的个人IT工具箱

吹爆，一款实用的个人IT工具箱

作为一名开发人员&#xff0c;我们在日常工作和学习中常常需要使用一系列小工具&#xff0c;如JSON格式化、JSON转表格、当前时间戳、XML格式化、SQL格式化、密码生成以及UUID生成等。通常情况下&#xff0c;我们会在网上搜索各种在线工具来满足这些需求。 然而&#xff0c;这…
阅读更多...
DePIN 赛道黑马，peaq network 如何打造全新 Web3 物联网？

DePIN 赛道黑马，peaq network 如何打造全新 Web3 物联网？

当 Web2 公司仍对用户数据和资料进行“中心化”的收集与控制时&#xff0c;我们虽享受到了物联网技术的便利&#xff0c;却依旧没有逃脱个人数据和价值所有权的剥夺。由此&#xff0c;Web3 技术开始深入物联网世界&#xff0c;智能家居、智能汽车、智能手机都成为重要发力点&am…
阅读更多...
冯喜运：4.19黄金，原油市场情绪分析：近期油价可能会回落？

冯喜运：4.19黄金，原油市场情绪分析：近期油价可能会回落？

【 黄金消息面解析】&#xff1a;周四(4月18日)&#xff0c;黄金上涨&#xff0c;现货金报每盎司2.384.83美元&#xff0c;上涨1%。中东地区持续的紧张局势未现缓和&#xff0c;继续扶持黄金逗留在历史高价位区域。周二美联储主席鲍威尔讲话&#xff0c;对何时可能降息三缄其口…
阅读更多...
计算机比赛什么含金量高

计算机比赛什么含金量高

acm含金量不如天梯&#xff0c;和蓝桥杯是同一层次 先说结论&#xff0c;根据专家讨论结果&#xff0c;蓝桥国一水平和icpc金牌含金量一样。&#xff08;doge 赢&#xff01;瑶瑶另先&#xff01; 会统计就多统计&#xff0c;我们acmer就是爱看这种数据 https://www.gxxsjs.co…
阅读更多...
基于ssm高校宿舍管理系统论文

基于ssm高校宿舍管理系统论文

摘 要 当下&#xff0c;正处于信息化的时代&#xff0c;许多行业顺应时代的变化&#xff0c;结合使用计算机技术向数字化、信息化建设迈进。以前学校对于宿舍信息的管理和控制&#xff0c;采用人工登记的方式保存相关数据&#xff0c;这种以人力为主的管理模式已然落后。本人结…
阅读更多...
探索 Nacos反序列化漏洞CNVD-2023-45001

探索 Nacos反序列化漏洞CNVD-2023-45001

在软件开发领域&#xff0c;安全漏洞是一项不容忽视的重要问题。最近&#xff0c;我们的安全团队发现了一个影响到我们的Nacos 2.1.0版本的反序列化漏洞&#xff0c;可能带来严重的安全威胁。我们已经立即采取了修复措施。本文将深入探讨这些漏洞的原理、可能造成的影响&#x…
阅读更多...
拷贝构造函数与运算符重载

拷贝构造函数与运算符重载

目录 一、拷贝构造函数 1.概念 2.特性 二、运算符重载 1.运算符重载 2.运算符重载实现的形式 3.赋值运算符重载 一、拷贝构造函数 1.概念 拷贝构造函数是一种特殊的构造函数&#xff0c;它在创建对象时&#xff0c;使用同一类中之前创建的对象来初始化新创建的对象…
阅读更多...
C# 动态加载dll

C# 动态加载dll

方式1 using System; using System.Reflection;class Program {static void Main(){string dllPath "path/to/your/library.dll"; // 替换为你的DLL文件路径Assembly myAssembly Assembly.LoadFile(dllPath);Type myType myAssembly.GetType("YourNamespace…
阅读更多...
力扣—2024/4/18—从双倍数组中还原原数组

力扣—2024/4/18—从双倍数组中还原原数组

代码实现&#xff1a; 快排 哈希表 ——超时 /*** Note: The returned array must be malloced, assume caller calls free().*/ void swap(int *m, int *n) {int temp *m;*m *n;*n temp; }// 快排 void sort(int *a, int l, int r) { // 左闭右开if (r - l < 2) {if (r…
阅读更多...
MIMO（多天线）通信的四种译码算法

MIMO（多天线）通信的四种译码算法

目录 一. 介绍 二. 极大似然译码 三. 破零译码算法 四. 最小均方误差算法 五. 球形译码 一. 介绍 发射天线数记为Mt&#xff0c;接收天线数记为Mr。由此发射信号x为向量&#xff1a; 接受信号y为向量&#xff1a; 信道H为矩阵&#xff1a; 利用n代表噪声向量&#xff0c;…
阅读更多...
axios的封装理解和基本使用

axios的封装理解和基本使用

axios的配置 ruoyi的前端对axios进行了封装&#xff0c;让我们发get请求或者是post请求更加方便了。 ruoyi对axios的封装在下面文件中&#xff1a;打开文件&#xff0c;可以看到它有三个显眼的方法&#xff0c;分别是request拦截器、response拦截器和通用下载方法。ruoYi接口地…
阅读更多...
最新文章

Copyright @ 2022~2023