flutter 生成单选组件

一、效果图

在这里插入图片描述

二、主要代码

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});

  @override
  State<CheckListWidget> createState() => CheckListWidgetState();
}

class CheckListWidgetState extends State<CheckListWidget> {
  RxMap<String, dynamic> selected = <String, dynamic>{}.obs;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    selected.value = widget.initValue ?? {};
  }

  @override
  Widget 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();
   }),

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/597673.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Vue中Element的下载

打开vscode让项目在终端中打开 输入npm install element-ui2.15.3 然后进行下载 在node_modules中出现element-ui表示下载完成 然后在输入Vue.use(ElementUI); import Vue from vue import App from ./App.vue import router from ./router import ElementUI from element-ui…

【目标检测】Deformable DETR

一、前言 论文&#xff1a; Deformable DETR: Deformable Transformers for End-to-End Object Detection 作者&#xff1a; SenseTime Research 代码&#xff1a; Deformable DETR 特点&#xff1a; 提出多尺度可变形注意力 (Multi-scale Deformable Attention) 解决DETR收敛…

已解决 RuntimeError: No CUDA GPUs are available 亲测有效!!!

已解决 RuntimeError: No CUDA GPUs are available 亲测有效&#xff01;&#xff01;&#xff01; 亲测有效 报错问题解决思路解决方法 报错问题 RuntimeError: No CUDA GPUs are available 这个错误通常发生在尝试在没有CUDA支持的GPU或没有安装NVIDIA GPU的机器上运行基于C…

Hamilton回路求解

如果可以 我想和你回到那天相遇 让时间停止 那一场雨 红线划过 深藏轮回的秘密 我挥霍运气 因为你 才让我 背对命运不害怕 --------- 如果可以 (Acapella) - 韦礼安 大家好&#xff0c;我又又又来了&#xff0c;今天给大家聊聊Hamilton回路&#xff01; 背景 国际象…

使用CUDA的PyTorch进行张量重整化的gpu加速

使用CUDA的PyTorch进行张量重整化的gpu加速 摘要IntroductionAlgorithm and TorchTrg discussionModels and Results GPU-Acceleration of Tensor Renormalization with PyTorch using CUDA 摘要 作者展示了基于张量重整化群&#xff08;TRG&#xff09;方法的数值计算可以通过…

HarmonyOS NEXT星河版之在线考试功能实战

文章目录 一、目标二、基础搭建2.1 定义数据2.2 mock数据2.3 主页面布局2.3.1 布局规划2.3.2 标题栏2.3.3 进度条2.3.4 答题模块2.3.5 底部按钮 2.4 主页面逻辑2.4.1 加载数据及定义变量2.4.2 上一题、下一题 三、选项点击及高亮3.1 声明对象及变量3.2 给选项注册点击事件3.3 处…

AI图书推荐:Zapier和AI融合来自动化业务流程

这本书《Zapier和AI融合来自动化业务流程》&#xff08;Automate It with Zapier and Generative AI&#xff09;由Kelly Goss撰写&#xff0c;这本书是为想要使用Zapier和AI集成功能来自动化重复性任务、提高生产力的微型、小型或中型企业的业务所有者、运营经理和团队准备的。…

C++入门基础(四)

目录 auto关键字(C11)类型别名思考auto的使用细则auto与指针和引用结合起来使用在同一行定义多个变量 auto不能推导的场景auto不能作为函数的参数auto不能直接用来声明数组 复杂场景下的auto 基于范围的for循环(C11)范围for的语法范围for的使用条件 指针空值---nullptr(C11)C98…

电商核心技术揭秘四十九:智能广告投放与效果评估

相关系列文章 电商技术揭秘相关系列文章合集&#xff08;1&#xff09; 电商技术揭秘相关系列文章合集&#xff08;2&#xff09; 电商技术揭秘相关系列文章合集&#xff08;3&#xff09; 电商技术揭秘四十一&#xff1a;电商平台的营销系统浅析 电商技术揭秘四十二&#…

饥荒服务器搭建centos

服务器环境需要64位32位不可用 uname -r 查看服务器版本 更新yum sudo yum update 安装依赖环境 sudo yum -y install glibc.i686 libstdc.i686 libcurl4-gnutls-dev.i686 libcurl.i686 screen 安装steam cd /home && mkdir steamcmd && cd steamcmd 国…

【typescript测试 - Jest 配置与使用】

安装 npm install --save-dev types/jestnpm install --save-dev ts-jest配置 tsconfig.json {"compilerOptions": {"types": ["jest"]} }jest.config.js module.exports {preset: ts-jest,testEnvironment: node, };使用 // add.js funct…

越权漏洞!

越权漏洞是指在一个系统或应用程序中存在某种不当的访问权限&#xff0c;使得攻击者可以获得比其应该拥有的权限更高的权限。这种漏洞可能允许攻击者执行未经授权的操作&#xff0c;例如访问他人的敏感数据、修改系统设置、执行恶意代码等。越权漏洞通常是由于设计或实现上的错…

HarmonyOS NEXT星河版之模拟图片选择器(下)---使用bindSheet展示图片选择器

文章目录 一、目标二、开撸2.1 bindSheet参数2.2 使用Builder修饰组件2.3 调用bindSheet 三、小结 一、目标 使用bindSheet属性实现图片选择器&#xff0c;如图&#xff1a; 二、开撸 2.1 bindSheet参数 bindSheet接收三个参数&#xff0c;如下&#xff1a; bindSheet(is…

精准读取CSV/Excel数据 - 灵活指定行列范围的 Python 解决方案

文章目录 源代码项目简介导入相关库__file_exists 装饰器函数的签名和注释主要功能的实现运行演示读取 Excel 文件 源代码 https://github.com/ma0513207162/PyPrecip。pyprecip\reading\read_api.py 路径下。 项目简介 PyPrecip 是一个专注于气候数据处理的 Python 库&#xf…

【C++ 关键字】const 关键字详解

文章目录 1. const 概念2.常量指针 和 指针常量 的区别2.1 常量指针&#xff08;底层 const&#xff09;2.2 指针常量 (顶层 const) 3.const 关键字的作用4.const 和 define 的区别5.const 总结 1. const 概念 const 是一个关键字&#xff0c;被修饰的值不能改变&#xff0c;是…

请求转发和响应重定向

文章目录 一、 概述二、 请求转发三、响应重定向参考资料 一、 概述 什么是请求转发和响应重定向 请求转发和响应重定向是web应用中间接访问项目资源的两种手段,也是Servlet控制页面跳转的两种手段 请求转发通过HttpServletRequest实现,响应重定向通过HttpServletResponse实现…

大模型模型简化机器人训练;简单易用的 3D 工具Project Neo;特斯拉放出了擎天柱机器人最新训练视频

✨ 1: DrEureka 利用大语言模型自动化将机器人仿真环境训练结果转移到真实世界 DrEureka是一种利用大型语言模型&#xff08;LLMs&#xff09;自动化和加速从仿真&#xff08;sim&#xff09;到现实世界&#xff08;real&#xff09;转移的技术。在机器人技能学习领域&#x…

Gradle基础学习(六) 认识任务Task

理解Gradle中的任务 Gradle的构建过程基于任务&#xff08;Task&#xff09;的概念&#xff0c;而每个任务都可以包含一个或多个动作&#xff08;Action&#xff09;。 任务是构建中执行的一些独立的工作单元&#xff0c;例如编译类、创建JAR、生成Javadoc或将存档发布到仓库…

62-USB转JTAG or SPI电路设计

视频链接 USB转JTAG or SPI电路设计01_哔哩哔哩_bilibili USB 转 JTAG or SPI电路设计 第07课---USB转串口电路设计第 34&#xff5e;40课---USB硬件电路设计 第22课---SPI Flash电路设计 第31课---JTAG电路设计&#xff08;JLINK&XILINX&ALTERA&#xff09; 第…

代码随想录-算法训练营day31【贪心算法01:理论基础、分发饼干、摆动序列、最大子序和】

代码随想录-035期-算法训练营【博客笔记汇总表】-CSDN博客 第八章 贪心算法 part01● 理论基础 ● 455.分发饼干 ● 376. 摆动序列 ● 53. 最大子序和 贪心算法其实就是没有什么规律可言&#xff0c;所以大家了解贪心算法 就了解它没有规律的本质就够了。 不用花心思去研究其…