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

news2025/5/25 17:36:53

根据传入的行列数创建不同格口数量的书架
左图：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.左上角、右上角中间格子及书架中间部分格子的背景
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

已经下载了pytorch，但在正确使用一段时间后出现No module named torch的错误

已经下载了pytorch，但在正确使用一段时间后出现No module named torch的错误

问题描述 使用的是叫做m2release的虚拟环境&#xff0c;在此环境下使用conda list可以发现是存在pytorch的&#xff0c;但是运行代码时却报No module named torch的错误。 解决方案 想尝试卸掉这个pytorch重新装一次&#xff0c;但是想卸载会提示找不到&#xff0c;想重新…
阅读更多...
PS CC 2024安装教程(附免费安装包资源)

PS CC 2024安装教程(附免费安装包资源)

鼠标右击软件压缩包&#xff0c;选择“解压到PS 2024安装包”。 打开解压后的文件夹&#xff0c;鼠标右击“Set-up”选择“以管理员身份运行”。 点击“文件夹”图标&#xff0c;选择安装的位置。 点击“更改位置”。 选择“D”盘&#xff0c;点击“新建文件夹”命名&#xff0…
阅读更多...
Scala 第一篇 基础篇

Scala 第一篇 基础篇

Scala 第一篇 基础篇 一、变量与常量 1、变量2、常量 二、数据类型 1、数据基本类型概览2、元组的声明与使用3、Range介绍和使用4、Option 类型的使用和设计5、类型别名 三、运算符四、程序逻辑 1、一切都是表达式2、分支语句3、循环语句 五、集合 1、List2、Set3、Map4、Arra…
阅读更多...
简单二分应用

简单二分应用

思路&#xff1a;首先二分需要数列有二分性&#xff0c;我们要对数列排序&#xff0c;然后二分距离&#xff0c;直到出现一个距离可以满足&#xff0c;点数大于等于k。 代码&#xff1a; void solve(){int n, q;cin >> n >> q;vector<int>a(n);for(int i …
阅读更多...
vue2和vue3的v-if与v-for优先级对比

vue2和vue3的v-if与v-for优先级对比

Vue.js 中使用最多的两个指令就是 v-if 和 v-for&#xff0c;因此我们可能会想要同时使用它们。虽然官方不建议这样做&#xff0c;但有时确实是必须的&#xff0c;我们来了解下他们的工作方式&#xff1a; 在 vue 2.x 中&#xff0c;在一个元素上同时使用 v-if 和 v-for 时&am…
阅读更多...
chromedriver最新版下载地址

chromedriver最新版下载地址

地址1.百度网盘 链接(提取码&#xff1a;2vo3)&#xff1a;百度网盘 请输入提取码百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全稳固&#xff0c;支持教育网加速&#xff0c;支持手机端。注册使用百度网盘即可享受免费存储空间https://pan.baidu.com…
阅读更多...
MySQL高级（索引-性能分析-explain执行计划）

MySQL高级（索引-性能分析-explain执行计划）

explain 或者 desc 命令获取 MySQL 如何执行 select 语句的信息&#xff0c;包括在 select 语句执行过程中表如何连接和连接的顺序。 -- 直接在 select 语句之前加上关键字 explain / desc explain select 字段列表 from 表名 where 条件 &#xff1b; explain select * …
阅读更多...
【科研入门】评价指标AUC原理及实践

【科研入门】评价指标AUC原理及实践

评价指标AUC原理及实践 目录 评价指标AUC原理及实践一、二分类评估指标1.1 混淆矩阵1.2 准确率 Accuracy定义公式局限性 1.3 精确率 Precision 和 召回率 Recall定义公式 1.4 阈值定义阈值的调整 1.5 ROC与AUC引入定义公式理解AUC算法 一、二分类评估指标 1.1 混淆矩阵 对于二…
阅读更多...
【Linux进阶之路】高级IO

【Linux进阶之路】高级IO

一、 铺垫 I&#xff0c;即input为输入&#xff1b;O&#xff0c;即output为输出&#xff0c;IO&#xff0c;即input output为输入输出。IO一般是基于网卡&#xff0c;磁盘&#xff0c;光盘&#xff0c;U盘&#xff0c;磁盘&#xff0c;磁带等毫秒级别的外存&#xff0c;相较…
阅读更多...
App Inventor 2 如何预览PDF文档？

App Inventor 2 如何预览PDF文档？

预览PDF文档的方式 你可以使用Activity启动器查看已存储在你的设备上的 pdf 文档&#xff0c;也可以使用Web客户端通过网址URL打开 pdf 文档。 App Inventor 2 可以使用 .pdf 扩展名从程序包资产中查看 pdf 文件&#xff0c;不再需要外部 pdf 查看器&#xff01; 代码如下&a…
阅读更多...
[SWPUCTF 2021 新生赛]原来你也玩原神

[SWPUCTF 2021 新生赛]原来你也玩原神

思路很乱&#xff1a; 先把zip转为MP3 再用MP3stego工具 得到text再转换为zip发现为加密 放入010把09改为00 打开zip文件得到flag
阅读更多...
vue里面事件修饰符.stop使用案例

vue里面事件修饰符.stop使用案例

Vue.js 事件修饰符 .stop 用于阻止事件继续传播&#xff0c;即阻止事件冒泡。这在处理父子组件之间的事件通信时特别有用&#xff0c;可以防止事件从子组件冒泡到父组件&#xff0c;或者在一个元素上绑定多个事件处理函数时&#xff0c;阻止后续事件处理函数的执行。 下面是一个…
阅读更多...
用这些工具搭建企业内部知识库，原来这么轻松

用这些工具搭建企业内部知识库，原来这么轻松

在快速发展和信息爆炸的时代&#xff0c;为企业构建一个内部知识库变得十分重要。它不仅有助于保存关键信息&#xff0c;促进知识传承&#xff0c;还能提高企业的整体效率和响应能力。今天&#xff0c;我们将探讨三款非常适合搭建企业内部知识库的工具&#xff0c;它们各具特色…
阅读更多...
在龙梦迷你电脑福珑2.0上使用Fedora 28 龙梦版

在龙梦迷你电脑福珑2.0上使用Fedora 28 龙梦版

在龙梦迷你电脑福珑2.0上使用Fedora 28 龙梦版。这个版本的操作系统ISO文件是&#xff1a;Fedora28_for_loongson_MATE_Live_7.2.iso 。它在功能方面不错。能放音乐&#xff0c;能看cctv直播&#xff0c;有声音&#xff0c;能录屏&#xff0c;能在局域网里用PuTTY的ssh方式连接…
阅读更多...
【Vue】实现显示输入框字符长度

【Vue】实现显示输入框字符长度

<div style"float: right; margin-right: 10px"><el-popover placement"top-start" width"200" trigger"hover" :content"当前输入的内容字节长度为&#xff1a; this.byteLength &#xff0c;剩余可输入的字节长度和最…
阅读更多...
信息系统及其技术发展

信息系统及其技术发展

目录 一、信息系统基本概念 1、信息系统项目开发 2、信息系统项目管理 3、信息系统 Ⅰ、生命周期 Ⅱ、新基建 ①信息基础设施 ②融合基础设施 ③创新基础设施 Ⅲ、工业互联网 Ⅳ、车联网 ①体系框架 ②连接方式 4、习题 二、信息技术发展 1、SDN 2、5G 3、存储…
阅读更多...
C语言——结构体详解

C语言——结构体详解

今天我们就一起来了解一下C语言中结构体有关的知识吧&#xff01; 结构是什么&#xff1f; 结构是一些值的集合&#xff0c;这些值被称为成员变量&#xff0c;结构的每个成员可以是不同类型的变量。 我们之前也学习过数组&#xff0c;这里我们来区分一下结构体和数组的…
阅读更多...
『FPGA通信接口』串行通信接口-IIC(2)EEPROM读写控制器

『FPGA通信接口』串行通信接口-IIC(2)EEPROM读写控制器

文章目录 1.EEPROM简介2.AT24C04简介3.逻辑框架设计4.随机读写时序5.仿真代码与仿真结果分析6.注意事项7.效果8.传送门 1.EEPROM简介 EEPROM (Electrically Erasable Programmable read only memory) 是指带电可擦可编程只读存储器。是一种掉电后数据不丢失的存储芯片。在嵌入…
阅读更多...
【Linux学习】Linux编辑器-vim使用

【Linux学习】Linux编辑器-vim使用

这里写目录标题 1. &#x1f320;vim的基本概念&#x1f320;2. vim的基本操作&#x1f320;3.vim异常处理&#x1f320;4. vim正常模式的相关命令&#x1f320;5. vim末&#xff08;底&#xff09;行模式相关命令 vi/vim都是多模式编辑器&#xff0c;不同的是vim是vi的升级版本…
阅读更多...
51单片机数字温度报警器_DS18B20可调上下限（仿真+程序+原理图）

51单片机数字温度报警器_DS18B20可调上下限（仿真+程序+原理图）

数字温度报警器 1 **主要功能&#xff1a;*****\*资料下载链接&#xff08;可点击&#xff09;&#xff1a;\**** 2 **仿真图&#xff1a;**3 **原理图&#xff1a;**4 **设计报告&#xff1a;**5 **程序设计&#xff1a;**主函数外部中断函数DS18B20驱动 6 讲解视频7 **资料清…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023