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});@overrideState<StatefulWidget> createState() {// TODO: implement createStatereturn _ExperienceStationCreateCellSpecsSet();}
}class _ExperienceStationCreateCellSpecsSet extends State<ExperienceStationCreateCellSpecsSet>{String _latticeImage = PathConfig.imageLatticeCenter;List<List<ExpCellSpecsBean>> _expCellSpecsList = [];//判断全选static bool _isSelectAll = false;//判断是否是全选或批量设置状态bool _isSelectAllBatch = false;@overridevoid initState() {// TODO: implement initStatesuper.initState();_setList();}@overrideWidget build(BuildContext context) {// TODO: implement buildreturn 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.rhkb.cn/news/311847.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

springboot整合dubbo实现RPC服务远程调用

springboot整合dubbo实现RPC服务远程调用

一、dubbo简介 1.什么是dubbo Apache Dubbo是一款微服务开发框架&#xff0c;他提供了RPC通信与微服务治理两大关键能力。有着远程发现与通信的能力&#xff0c;可以实现服务注册、负载均衡、流量调度等服务治理诉求。 2.dubbo基本工作原理 Contaniner:容器Provider&#xf…
阅读更多...
Linux内核之WRITE_ONCE用法实例(四十八)

Linux内核之WRITE_ONCE用法实例(四十八)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…
阅读更多...
分析ARP解析过程

分析ARP解析过程

1、实验环境 主机A和主机B连接到交换机&#xff0c;并与一台路由器互连&#xff0c;如图7.17所示&#xff0c;路由器充当网关。 图7.17 实验案例一示意图 2、需求描述 查看 ARP 相关信息,熟悉在PC 和 Cisco 设备上的常用命令,设置主机A和主机B为同一个网段网关设置为路由接…
阅读更多...
【Conda基础命令】使用conda创建、查看、删除虚拟环境及可能的报错处理

【Conda基础命令】使用conda创建、查看、删除虚拟环境及可能的报错处理

文章目录 前言&#xff08;1&#xff09; 在默认路径下创建一个新的虚拟环境&#xff08;2&#xff09; 查看已有的虚拟环境&#xff08;3&#xff09; 删除已有的虚拟环境&#xff08;谨慎操作&#xff09;&#xff08;4&#xff09;激活虚拟环境&#xff08;5&#xff09;退出…
阅读更多...
OpenCV轻松入门（八）——图片卷积

OpenCV轻松入门（八）——图片卷积

对图像和滤波矩阵进行逐个元素相乘再求和的操作就相当于将一个二维的函数移动到另一个二维函数的所有位置&#xff0c;这个操作就叫卷积。 卷积需要4个嵌套循环&#xff0c;所以它并不快&#xff0c;除非我们使用很小的卷积核。这里一般使用3x3或者5x5 图像滤波 图像滤波是尽…
阅读更多...
P9241 [蓝桥杯 2023 省 B] 飞机降落

P9241 [蓝桥杯 2023 省 B] 飞机降落

原题链接&#xff1a;[蓝桥杯 2023 省 B] 飞机降落 - 洛谷 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 dfs全排列的变形题。 因为最后问飞机是否降落&#xff0c;并且一架飞机降落完毕时另一架飞机才能降落。所以我们设置dfs的两个变量cnt为安全…
阅读更多...
通过adb 命令打印安装在第三方模拟器上的log

通过adb 命令打印安装在第三方模拟器上的log

1&#xff0c;环境&#xff1a;Windows 11 &#xff0c;第三方模拟器 网易的MuMu 步骤&#xff1a; 1&#xff0c;打开cmd&#xff0c;输入 adb connect 172.0.0.1:7555 2&#xff0c;在cmd&#xff0c;再次输入adb logcat 回车
阅读更多...
案例分析-redis

案例分析-redis

案例需求&#xff1a;在7002这个slave节点执行手动故障转移&#xff0c;重新夺回master地位 步骤如下&#xff1a; 1&#xff09;利用redis-cli连接7002这个节点 2&#xff09;执行cluster failover命令 如图&#xff1a; 效果&#xff1a; 4.5.RedisTemplate访问分片集群 …
阅读更多...
一个文生视频MoneyPrinterTurbo项目解析

一个文生视频MoneyPrinterTurbo项目解析

最近抖音剪映发布了图文生成视频功能，同时百家号也有这个功能，这个可以看做是一个开源的实现，一起看看它的原理吧~ 一句话提示词 大模型生成文案 百家号生成视频效果 MoneyPrinterTurbo生成视频效果 天空为什么是蓝色的？ 天空之所以呈现蓝色，是因为大气中的分子和小粒子会…
阅读更多...
死磕GMSSL通信-java/Netty系列（二）

死磕GMSSL通信-java/Netty系列（二）

死磕GMSSL通信-java/Netty系列（二） 在上一篇文章中，我们探讨了如何利用C/C++实现国密通信。而本文将聚焦于Java环境下，特别是基于Netty框架，如何实现与国密系统的安全通信。为了确保新项目遵循最新的国密标准，我们将优先推荐使用GB/T 38636-2020（TLCP）协议。对于Java开…
阅读更多...
怎么转行做产品经理？

怎么转行做产品经理？

小白转产品经理第一点要先学基础理论知识&#xff0c;学了理论再去实践&#xff0c;转行&#xff0c;跳槽&#xff01; 学理论比较好的就是去报NPDP的系统班&#xff0c;考后也会有面试指导课、职场晋升课程&#xff0c;对小白来说非常合适了~&#xff08;B站&#xff1a;不爱…
阅读更多...
微软正式发布Copilot for Security

微软正式发布Copilot for Security

微软公司近日宣布&#xff0c;其备受期待的安全自动化解决方案——Copilot for Security现已全面上市&#xff0c;面向全球用户开放。这一创新工具的推出标志着微软在提升企业安全防护能力方面迈出了重要一步&#xff0c;同时也为安全专业人士提供了强大的支持。 Copilot for …
阅读更多...
图数据库Neo4J入门——Neo4J下载安装+Cypher基本操作+《西游记》人物关系图实例

图数据库Neo4J入门——Neo4J下载安装+Cypher基本操作+《西游记》人物关系图实例

这里写目录标题 一、效果图二、环境准备三、数据库设计3.1 人物节点设计3.2 关系设计 四、操作步骤4.1 下载、安装、启动Neo4J服务4.1.1 配置Neo4J环境变量4.1.2 启动Neo4J服务器4.1.3 启动Ne04J客户端 4.2 创建节点4.3 创建关系&#xff08;从已有节点创建关系&#xff09;4.4…
阅读更多...
百度智能云万源全新一代智能计算操作系统发布：引领AI新纪元，开启智能未来

百度智能云万源全新一代智能计算操作系统发布：引领AI新纪元，开启智能未来

随着科技的迅猛发展&#xff0c;人工智能&#xff08;AI&#xff09;逐渐渗透到我们生活的每个角落&#xff0c;为人类社会带来前所未有的变革。在这场科技革命的浪潮中&#xff0c;百度作为中国AI领域的领军企业&#xff0c;始终站在技术创新的前沿&#xff0c;不断引领行业发…
阅读更多...
数字电路（四，五章总结）

数字电路（四，五章总结）

四.组合逻辑电路设计 由波形图列真值表&#xff0c;之 后画出卡诺图&#xff0c;写出最简逻辑表达式。 卡诺图化简的时候圈住的部分如果某个字母有0又有1的话这个字母删掉&#xff0c;写出其他两个字母。 如下图中黄圈A有0又有1则删除A&#xff0c;这样黄圈代表BC;同理绿圈代…
阅读更多...
35、链表-LRU缓存

35、链表-LRU缓存

思路&#xff1a; 首先要了解LRU缓存的原理&#xff0c;首先定下容量&#xff0c;每次get请求和put请求都会把当前元素放最前/后面&#xff0c;如果超过容量那么头部/尾部元素就被移除&#xff0c;所以最近最少使用的元素会被优先移除&#xff0c;保证热点数据持续存在。 不管放…
阅读更多...
【Java】@RequestMapping注解在类上使用

【Java】@RequestMapping注解在类上使用

RequestMapping 是 Spring Web 应用程序中最常被用到的注解之一。这个注解会将 HTTP 请求映射到控制器&#xff08;controller类&#xff09;的处理方法上。 Request Mapping 基础用法 在 Spring MVC 应用程序中&#xff0c;RequestDispatcher (在 Front Controller 之下) 这…
阅读更多...
MapReduce 机理

MapReduce 机理

1.hadoop 平台进程 Namenode进程: 管理者文件系统的Namespace。它维护着文件系统树(filesystem tree)以及文件树中所有的文件和文件夹的元数据(metadata)。管理这些信息的文件有两个&#xff0c;分别是Namespace 镜像文件(Namespace image)和操作日志文件(edit log)&#xff…
阅读更多...
命令模式

命令模式

命令模式&#xff1a;将一个请求封装为一个对象&#xff0c;从而使你可用不同的请求对客户进行参数化&#xff1b;对请求排队或记录请求日志&#xff0c;以及支持可撤销的操作。 命令模式的好处&#xff1a; 1、它能较容易地设计一个命令队列&#xff1b; 2、在需要的情况下&a…
阅读更多...
【Phytium】飞腾D2000 UEFI/EDK2 适配 RTC(IIC SD3077)

【Phytium】飞腾D2000 UEFI/EDK2 适配 RTC(IIC SD3077)

文章目录 0. env1. 软件2. 硬件 10. 需求1. 硬件2. 软件 20. DatasheetCPURTC 30. 调试步骤1. 硬件环境搭建2. UEFI 开发环境搭建3. 修改步骤1. UEFI 中使能RTC驱动、配置RTC信息等1.1 使能RTC驱动1.2 修改RTC对应的IIC配置信息1.3 解决驱动冲突1.4 验证波形 2. 修改对应RTC驱动…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023