flutter 生成单选组件

news/2025/1/11 0:39:51/

一、效果图

在这里插入图片描述

二、主要代码

import 'package:company_manage_flutter/xcClass/dicDataProp.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';class CheckListWidget extends StatefulWidget {final List<Map<String, dynamic>> list;final Function? onChanged;final DicDataProp props;Map<String, dynamic>? initValue;CheckListWidget({super.key,required this.list,this.onChanged,this.props = const DicDataProp(),this.initValue});@overrideState<CheckListWidget> createState() => CheckListWidgetState();
}class CheckListWidgetState extends State<CheckListWidget> {RxMap<String, dynamic> selected = <String, dynamic>{}.obs;@overridevoid initState() {// TODO: implement initStatesuper.initState();selected.value = widget.initValue ?? {};}@overrideWidget build(BuildContext context) {return buildCheckList(widget.list, widget.onChanged, props: widget.props);}void test() {print('test-组件内的方法');}//单选列表Widget buildCheckList(List<Map<String, dynamic>> list, Function? onChanged,{DicDataProp? props}) {String label = props?.label ?? 'label';String value = props?.value ?? 'value';return Obx(() => Container(width: Get.width,child: Column(children: list.asMap().entries.map((entry) {int index = entry.key;dynamic item = entry.value;return Column(children: [GestureDetector(onTap: () {selected?.value = item;if (onChanged != null) {onChanged(item);}},child: Container(width: Get.width,decoration: BoxDecoration(color: Colors.blue.withOpacity(0),),padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 16),child: Row(children: [Icon((selected?.value[value] ?? '') == item[value]? Icons.check_circle: Icons.circle_outlined,size: 22,color:(selected?.value[value] ?? '') == item[value]? Color.fromRGBO(50, 73, 223, 1): Color.fromRGBO(21, 23, 30, 0.40)),SizedBox(width: 6),Text(item[label] ?? "",style: TextStyle(fontSize: 16,),),],),)),Divider(height: 1,color: index + 1 == list.length? Color.fromRGBO(128, 130, 145, 0): Color.fromRGBO(128, 130, 145, 0.20),),],);}).toList(),)));}
}

三、使用

//CheckListWidgetState 不能已下划线开头,因为_开头是私有的,不能在其他文件中访问final checkListWidgetKey = GlobalKey<CheckListWidgetState>();CheckListWidget(key: checkListWidgetKey,list: bottomSheetList,onChanged: (value) {print("CheckListWidget:${value}");},initValue: const {'id': '18', 'name': '仓库1'},props: DicDataProp(label: 'name', value: 'id'),),buildButtonWidget('调用组件的方法、获取值', onPressed: () {print('调用组件的方法、获取值 = ${checkListWidgetKey.currentState?.selected}');checkListWidgetKey.currentState?.test();}),

http://www.ppmy.cn/news/1451037.html

相关文章

tomcat篇-windows 运行tomcat的startup.bat时,终端打印的中文显示为乱码

当运行Tomcat的startup.bat时&#xff0c;如果终端中中文显示为乱码&#xff0c;这通常是因为Tomcat使用的日志输出编码与Windows命令行默认的编码不匹配。针对这一问题&#xff0c;你可以尝试以下步骤来解决&#xff1a; 1、执行startup.bat&#xff0c;在输出的窗口右击&…

机器学习-保险花销预测笔记+代码

读取数据 import numpy as np import pandas as pddatapd.read_csv(rD:\人工智能\python视频\机器学习\5--机器学习-线性回归\5--Lasso回归_Ridge回归_多项式回归\insurance.csv,sep,) data.head(n6) EDA 数据探索 import matplotlib.pyplot as plt %matplotlib inlineplt.hi…

停止使用 TypeScript 接口

为什么应该使用类型而不是接口 这张图片是由人工智能生成的。 类型和接口 是每个 TypeScript 程序中使用的重要特性。 然而&#xff0c;由于类型和接口在功能上非常相似&#xff0c;这就引出了一个问题&#xff1a;哪个更好&#xff1f; 今天&#xff0c;我们将评估类型和接…

tcp inflight 守恒算法的自动收敛

inflight 守恒算法看起来只描述理想情况&#xff0c;现实很难满足&#xff0c;是这样吗&#xff1f; 从 reno 到 bbr&#xff0c;无论哪个算法都在描述理想情况&#xff0c;以 reno 和 bbr 两个极端为例&#xff0c;它们分别描述两种理想管道&#xff0c;reno 将 buffer 从恰好…

idm下载速度慢解决办法 idm批量下载怎么用 idm优化下载速度 Internet Download Manager解决下载速度慢的方法教程

IDM (Internet Download Manager)是一款兼容性大&#xff0c;支持多种语言的下载管理软件&#xff0c;它可以自动检测并下载网页上的内容&#xff0c;这正是这一优点&#xff0c;使得它受到了广大用户的喜爱。但是在下载的过程中&#xff0c;我们会遇到idm下载速度慢怎么回事&a…

git如何将多个commit合并成一个?

我们使用git进行版本控制&#xff0c;在本地开发完某个功能时&#xff0c;需要提交commit&#xff0c;然后push至开发分支。简单的功能还好&#xff0c;几个commit可能就好了。但是如果功能比较复杂&#xff0c;commit多达十几甚至几十个时&#xff0c;commit管理就会很冗长。比…

Linux如何redis清空缓存

通过命令清空缓存 登录redis redis-cli -h 127.0.0.1 -p 6379# 如果有密码需要下面这一步 auth 你的密码出现ok表示登录成功 查看所有key keys * 清空整个Redis服务器的数据 flushall

OpenLayers入门①(引入的是一个高德地图)

OpenLayers入门&#xff08;一&#xff09; - 知乎 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport&qu…