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.mzph.cn/diannao/685.shtml

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

相关文章

基于SpringBoot+Vue的外卖点餐网站 免费获取源码

基于SpringBoot+Vue的外卖点餐网站 免费获取源码

项目源码获取方式放在文章末尾处 项目技术 数据库&#xff1a;Mysql5.7/8.0 数据表&#xff1a;12张 开发语言&#xff1a;Java(jdk1.8) 开发工具&#xff1a;idea 前端技术&#xff1a;vue html 后端技术&#xff1a;SpringBoot 功能简介 (有文档) 项目获取关键字&…
阅读更多...
K8s: 在Pod中将configmap数据注入容器

K8s: 在Pod中将configmap数据注入容器

configMap 概述 文档: https://kubernetes.io/zh-cn/docs/concepts/configuration/configmap/ Kubernetes 为我们提供了 ConfigMap&#xff0c;可以方便的配置一些变量 是一个存储键值对 key-value 对象的 创建一个可以包含多个键值对的 ConfigMap, 以下是&#xff1a;mul-c…
阅读更多...
Java 笔试强训篇- Day1

Java 笔试强训篇- Day1

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 点击消除 1.1 解题思路一 1.2 解题思路二 2.0 在两个数组中找出相同的数 2.1 解题思路 笔试强训说明&#xff1a;有一些题目提供不了原题。 1.0 点击消除 该题链…
阅读更多...
Group Query Attention (GQA) 机制详解以及手动实现计算

Group Query Attention (GQA) 机制详解以及手动实现计算

Group Query Attention (GQA) 机制详解 1. GQA的定义 Grouped-Query Attention (GQA) 是对 Multi-Head Attention (MHA) 和 Multi-Query Attention (MQA) 的扩展。通过提供计算效率和模型表达能力之间的灵活权衡&#xff0c;实现了查询头的分组。GQA将查询头分成了G个组&#…
阅读更多...
事务的传播行为介绍和事务失效

事务的传播行为介绍和事务失效

常用的就下图介绍的这两种&#xff0c;REQUIRED 支持当前事务&#xff0c;如果不存在&#xff0c;就新建一个&#xff0c;EQUIRES_NEW 如果有事务存在&#xff0c;挂起当前事务&#xff0c;创建一个新的事务 同一个service中必须用代理对象调用&#xff0c;否则失效
阅读更多...
使用go和消息队列优化投票功能

使用go和消息队列优化投票功能

文章目录 1、优化方案与主要实现代码1.1、原系统的技术架构1.2、新系统的技术架构1.3、查看和投票接口实现1.4、数据入库MySQL协程实现1.5、路由配置1.6、启动程序入口实现 2、压测结果2.1、设置Jmeter线程组2.2、Jmeter聚合报告结果&#xff0c;支持11240/秒吞吐量2.3、Jmeter…
阅读更多...
java中MD5加密

java中MD5加密

MD5加密 MD5加密是不可逆的加密方式&#xff0c;A可以根据MD5加密转换成B&#xff0c;但是B不能再转换成A String passwordDigestUtils.md5DigestAsHex(password.getBytes());完成密码的加密
阅读更多...
【情侣博客网站】

【情侣博客网站】

效果图 PC端 建塔教程 第一步&#xff1a;下载网站源码&#xff08;在文章下方有下载链接&#xff09; 第二步&#xff1a;上传到服务器或虚拟主机&#xff0c;解压。 第三步&#xff1a;这一步很关键&#xff0c;数据库进行连接&#xff0c;看图 admin/connect.php就是这…
阅读更多...
[Android]Jetpack Compose设置颜色

[Android]Jetpack Compose设置颜色

在 Kotlin 和 Jetpack Compose 中设置颜色是一个非常直接的过程&#xff0c;涉及到使用 Color 类来定义和使用颜色。 Jetpack Compose 提供了多种方式来定义和应用颜色&#xff0c;包括预定义颜色、RGB 值、十六进制值等。下面是一些常用的设置颜色的方法&#xff1a; 1. 使用…
阅读更多...
python-基础(4)-list

python-基础(4)-list

python专栏地址 上一篇:python-基础(3)-字符串操作 List结构 本节将学习以下内容 list初识list的操作 一、List初识 创建 通过[]/list([])创建 &#xff0c;两者的区别可以参考python中用list和中括号创建列表有什么区别&#xff1f;(在创建时相同&#xff0c;但一个的实质时…
阅读更多...
Spring Data Jpa的save方法更新未传值的字段被更新为空的处理方法

Spring Data Jpa的save方法更新未传值的字段被更新为空的处理方法

Spring Data Jpa的save()方法通过主键是否为空来判断insert或是update操作&#xff0c;但更新方法和以往使用的mybatis-plus存在一定的差异&#xff0c;特别记录处理方法。 Resourceprivate Dao dao;/*** 更新操作* param data 前端传入存在更新的字段值的对象*/public void up…
阅读更多...
pat乙-1020月饼

pat乙-1020月饼

贪心&#xff1a;既然有存货量一定&#xff0c;利润要最高&#xff1b; 这个贪心就在于我看“单价”最高&#xff0c;这个单价也是要把存货量算进去的&#xff0c;所以按“单价”排序&#xff0c;再遍历&#xff0c;优选选择“单价”最高的&#xff0c;不够的再补&#xff0c;…
阅读更多...
el-menu 该有的页面显示不出来第一个应该想到的问题首先就算检查是否多写了一个 , 导致显示不出来原有的页面

el-menu 该有的页面显示不出来第一个应该想到的问题首先就算检查是否多写了一个 , 导致显示不出来原有的页面

问题描述 el-menu 该有的页面显示不出来第一个应该想到的问题首先就算检查是否多写了一个 , 导致显示不出来原有的页面 如图所示多写了一个&#xff0c;就会导致该有的页面显示不出来。
阅读更多...
Python 天气预测

Python 天气预测

Python天气预测通常涉及到数据采集、数据预处理、选择和训练模型、以及预测和可视化等步骤。以下是使用Python进行天气预测的一般流程&#xff1a; 数据采集 使用爬虫技术从天气网站&#xff08;如Weather Underground、中国天气网等&#xff09;爬取历史天气数据&#xff0c…
阅读更多...
my.cnf配置文件调优

my.cnf配置文件调优

mysql数据库的性能调优首先要考虑的就是表结构设计，一个糟糕的设计模式即使在性能强劲的服务器上运行时，也会表现得很差。与设计模式相似，查询语句也会影响mysql的性能，应该避免写出低效的sql查询语句。最后要考虑的就是参数优化，mysql数据库默认设置的性能非常差，只能起…
阅读更多...
LeetCode 628. 三个数的最大乘积 java版

LeetCode 628. 三个数的最大乘积 java版

1. 官网&#xff1a; . - 力扣&#xff08;LeetCode&#xff09; 2. 题目&#xff1a; 给你一个整型数组 nums &#xff0c;在数组中找出由三个数组成的最大乘积&#xff0c;并输出这个乘积。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;6示例 2&…
阅读更多...
Java中的递归方法：初学者的简明指南

Java中的递归方法：初学者的简明指南

Java中的递归方法&#xff1a;初学者的简明指南 递归是编程中的一个重要概念&#xff0c;它指的是一个方法直接或间接地调用自身。递归方法在处理某些问题时&#xff0c;特别是那些可以分解为更小、更简单的子问题时&#xff0c;非常有用。虽然递归的概念初看起来可能有些复杂…
阅读更多...
QEMU_v8搭建OP-TEE运行环境

QEMU_v8搭建OP-TEE运行环境

文章目录 一、依赖下载二、设置网络三、安装下载四、运行OP-TEE 一、依赖下载 更新依赖包&#xff0c;下载一系列依赖。比如Python需要Python3.x版本&#xff0c;需要配置git的用户名和邮箱等。这里不详细展开了&#xff0c;很多博客都有涉及到。 二、设置网络 这一点非常重…
阅读更多...
【nginx代理和tengine的启动-重启等命令】

【nginx代理和tengine的启动-重启等命令】

在nginx成功启动后[任务管理器有nginx.exe进程]&#xff0c;运行vue项目&#xff0c;在浏览器访问http://localhost:10001/&#xff0c;提示&#xff1a;访问拒绝&#xff08;调试中network某些地址403&#xff09;&#xff1b; 解决方案&#xff1a; localhost改为ip&#xff…
阅读更多...
已解决：用 Pyinstaller 模块将整个GUI项目打包成 单独exe 文件、移到没有python的环境依旧可以运行（全网完美解决的方法）

已解决：用 Pyinstaller 模块将整个GUI项目打包成 单独exe 文件、移到没有python的环境依旧可以运行（全网完美解决的方法）

1.环境 我的项目是pyside2实现的GUI项目，涉及文件读写、panda操作等，项目包括ui文件、ico文件、项目模块（项目中有多个不同的模块、每个模块里面有代码）。项目内容是可以使用该GUI框架对别的数据文件进行读取、加工处理、保存等一系列操作。win11+python3.8+pyside2+其它库…
阅读更多...
最新文章

Copyright @ 2022~2023