flutter 生成单选组件

devtools/2024/12/22 1:57:17/

一、效果图

在这里插入图片描述

二、主要代码

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/devtools/30825.html

相关文章

搭建MongoDB分片集群

文章目录 一、什么是分片二、分片集群1、组件构成2、分片集群内各组件间交互 三、数据如何切分四、分片策略1、哈希分片2、范围分片 五、分片集群架构六、搭建分片集群1、涉及主机2、所有主机安装MongoDB3、分片节点副本集的创建3.1、第一套副本集shard13.1.1、准备存放数据和日…

C语言/数据结构——每日一题(链表的中间节点)

一.前言 今天我在LeetCode刷到了一道单链表题&#xff0c;想着和大家分享一下这道题&#xff1a;https://leetcode.cn/problems/middle-of-the-linked-list。废话不多说让我们开始今天的知识分享吧。 二.正文 1.1题目描述 1.2题目分析 这道题有一个非常简便的方法——快慢指…

JS实现瀑布流布局

瀑布流布局是一种常见的网页布局方式&#xff0c;可以实现页面内容的动态排列&#xff0c;使页面看起来更加美观。下面是一个简单的JS实现瀑布流布局的示例&#xff1a; <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8&quo…

电商独立站最重要的功能设置:多语言转换和代运系统搭建

什么是独立站&#xff1f; 多语言模式切换 1 搭建电商独立站在我看来最简单的理解&#xff0c;就是独立的网站。 如果你在跨境圈子呆了一段时间&#xff0c;独立站是一个避不开且火热的一个词&#xff0c;并且也是所有的B2B、B2C商家都在运营和布局的市场。 独立站的优势有哪…

【数据结构】算法的效率(时间复杂度和空间复杂度)

目录 一.算法的效率 二.时间复杂度 1.概念 2.大O的渐进表示法 3.常见时间复杂度计算举例 三.空间复杂度 四.常见复杂度对比 五. 复杂度的oj练习 1.消失的数字 2.轮转数字&#xff1a; 一.算法的效率 算法在编写成可执行程序后&#xff0c;运行时需要耗费时间资源和空…

管理能力学习笔记八:Will-Skill矩阵“盘“团队

如何把握带教中的“度”&#xff0c;才能在把事情做好的基础上&#xff0c;又能使员工获得成长呢&#xff1f; 需要做到 合理授权 & 适当辅导 如何做到&#xff1f; 通过使用 意愿-技能矩阵(Will-Skill Matrix) 辨别不同带教方法的适用情形&#xff0c;"盘"…

模型蒸馏吼吼吼

深度学习模型蒸馏&#xff08;Model Distillation&#xff09;是一种将大型、复杂模型&#xff08;称为教师模型&#xff09;的知识传递给小型、简单模型&#xff08;称为学生模型&#xff09;的技术。这种技术的目的是减少模型的大小和计算复杂性&#xff0c;同时尽量保留原始…

ASP.NET视频点播系统的设计与实现

摘 要 本文阐述了基于WEB的交互式视频点播系统的协议原理、软件结构和设计实现。本视频点播系统根据流媒体传输原理&#xff0c;在校园局域网的基础上模拟基于Web的视频点播系统&#xff0c;实现用户信息管理、视频文件的添加、删除、修改及在线播放和搜索功能。本系统是一个…