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

2024-04-17 11:20
文章标签 配置 是否 形式 flutter 动态创建 列数 全选 书架 格口

本文主要是介绍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.左上角、右上角中间格子及书架中间部分格子的背景
在这里插入图片描述

这篇关于flutter书架形式格口的动态创建（行、列数，是否全选的配置）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/911665。

相关文章

SpringBoot3.4配置校验新特性的用法详解

SpringBoot3.4配置校验新特性的用法详解

《SpringBoot3.4配置校验新特性的用法详解》SpringBoot3.4对配置校验支持进行了全面升级,这篇文章为大家详细介绍了一下它们的具体使用,文中的示例代码讲解详细,感兴趣的小伙伴可以参考... 目录基本用法示例定义配置类配置 application.yml注入使用嵌套对象与集合元素深度校验开发
阅读更多...
IntelliJ IDEA 中配置 Spring MVC 环境的详细步骤及问题解决

IntelliJ IDEA 中配置 Spring MVC 环境的详细步骤及问题解决

《IntelliJIDEA中配置SpringMVC环境的详细步骤及问题解决》：本文主要介绍IntelliJIDEA中配置SpringMVC环境的详细步骤及问题解决,本文分步骤结合实例给大... 目录步骤 1：创建 Maven Web 项目步骤 2：添加 Spring MVC 依赖1、保存后执行2、将新的依赖
阅读更多...
SpringBoot基于配置实现短信服务策略的动态切换

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商（如阿里云、腾讯云、华为云）后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置（application.yml）配置类绑定短信发送策略接口示例：阿里云 & 腾
阅读更多...
如何为Yarn配置国内源的详细教程

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方
阅读更多...
Python如何精准判断某个进程是否在运行

Python如何精准判断某个进程是否在运行

《Python如何精准判断某个进程是否在运行》这篇文章主要为大家详细介绍了Python如何精准判断某个进程是否在运行,本文为大家整理了3种方法并进行了对比,有需要的小伙伴可以跟随小编一起学习一下... 目录一、为什么需要判断进程是否存在二、方法1：用psutil库（推荐）三、方法2：用os.system调用
阅读更多...
CentOS7更改默认SSH端口与配置指南

CentOS7更改默认SSH端口与配置指南

《CentOS7更改默认SSH端口与配置指南》SSH是Linux服务器远程管理的核心工具,其默认监听端口为22,由于端口22众所周知,这也使得服务器容易受到自动化扫描和暴力破解攻击,本文将系统性地介绍... 目录引言为什么要更改 SSH 默认端口？步骤详解：如何更改 Centos 7 的 SSH 默认端口1
阅读更多...
Maven的使用和配置国内源的保姆级教程

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H
阅读更多...
SpringBoot多数据源配置完整指南

SpringBoot多数据源配置完整指南

《SpringBoot多数据源配置完整指南》在复杂的企业应用中,经常需要连接多个数据库,SpringBoot提供了灵活的多数据源配置方式,以下是详细的实现方案,需要的朋友可以参考下... 目录一、基础多数据源配置1. 添加依赖2. 配置多个数据源3. 配置数据源Bean二、JPA多数据源配置1. 配置主数据
阅读更多...
Spring 基于XML配置 bean管理 Bean-IOC的方法

Spring 基于XML配置 bean管理 Bean-IOC的方法

《Spring基于XML配置bean管理Bean-IOC的方法》：本文主要介绍Spring基于XML配置bean管理Bean-IOC的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一... 目录一. spring学习的核心内容二. 基于 XML 配置 bean1. 通过类型来获取 bean2. 通过
阅读更多...
如何使用Nginx配置将80端口重定向到443端口

如何使用Nginx配置将80端口重定向到443端口

《如何使用Nginx配置将80端口重定向到443端口》这篇文章主要为大家详细介绍了如何将Nginx配置为将HTTP（80端口）请求重定向到HTTPS（443端口）,文中的示例代码讲解详细,有需要的小伙... 目录1. 创建或编辑Nginx配置文件2. 配置HTTP重定向到HTTPS3. 配置HTTPS服务器
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2