首页 > 其他分享 >多选列表用法

多选列表用法

时间:2024-06-18 23:32:59浏览次数:26  
标签:index 多选 value 用法 选中 组件 列表 属性

文章目录


我们在上一章回中介绍了扩展内容相关的知识,本章回中将介绍单选列表和复选列表.闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

知识回顾

我们在本章回中将介绍单选和复选列表,它们是常用的组件,不只在移动平台中使用,在其它平台上也经常被使用,比如web,windows。因此,我就不介绍它们的概念了,
在Flutter中使用RadioListTile和CheckboxListTile组件表示单选和复选列表,我们在本章回中介绍它们是因为上一章回中介绍了ExpansionTile组件,这些
组件的功能类似:都用来当作ListView的子项。此外,我们还将介绍另外一个功能相似的组件:SwitchListTile。

使用方法

单选列表的功能,我们在前面章回中介绍过,如果有看官忘记的话可以点击这里查看以前的博客。我们在本章回中重点介绍CheckboxListTile和SwitchListTile这
两个组件。和其它组件类似,这两个组件提供了相关的属性来控制自己,下面是常用的属性:

  • title属性:用来显示组件的标题,通常在图标左侧显示;
  • tileColor属性:用来控制整个组件的背景颜色;
  • activeColor属性: 用来控制组件被选中时的颜色;
  • value属性: 用来控制组件是否被选中,true表示选中false表示未选中;
  • onChanged属性:它是方法类型的属性,点击组件时回调该属性对应的方法;
    在使用属性时通常会在onChanged属性对应的方法中修改value属性的值,然后使用setState()方法更新组件的状态,这样可以实现点击功能:点击组件时选中组件,
    再次点点击组件时,未选中组件。稍后我们会在示例代码中进行演示。

示例代码

  static int listSize = 3;
  static final List<bool?> _checkBoxState = List.generate(listSize, (index) => false);
  static final List<bool> _switchState = List.generate(listSize, (index) => false);

  CheckboxListTile _checkBoxListTile(index) {
    return CheckboxListTile(
      ///在checkBox左侧显示标题
      title: Text("This is item: $index"),
      ///相当于整个title的背景颜
      tileColor: Colors.blue,
      ///控制checkbox被选中时的颜色
      activeColor: Colors.green,
      ///true表示选中false表示未选中
      value: _checkBoxState[index],
      onChanged: (v) {
        //v的值就是index
        debugPrint("value of list $v");
        setState(
          () {
            _checkBoxState[index] = v;
          },
        );
      },
    );
  }

  SwitchListTile _switchListTile(index) {
    return SwitchListTile(
      title: Text("This is item: $index"),
      activeColor: Colors.green,
      ///用来控制title中文字被选中时的颜色
      selected: _switchState[index],
      value: _switchState[index],
      ///点击switch或者它前面的文字时都会回调此方法
      onChanged: (v) {
        ///v的值就是index
        debugPrint("value of list $v");
        setState(
          () {
            _switchState[index] = v;
          },
        );
      },
    );
  }

在上面的示例代码中,我们把组件封装成了单独的方法,方法中包含索引值,该方法配合ListView使用时传入不同的索引值就可以创建出复选框列表和开关列表。如果想
单独使用时传入任意一个int数值就可以。我在这里就不演示程序的运行方法了,建议大家自己动手去实践。
看官们,关于"单选和复选列表"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

标签:index,多选,value,用法,选中,组件,列表,属性
From: https://blog.csdn.net/talk_8/article/details/139785525

相关文章

  • 深入探究:Java SE中的数组高级用法
    哈喽,各位小伙伴们,你们好呀,我是喵手。运营社区:C站/掘金/腾讯云;欢迎大家常来逛逛  今天我要给大家分享一些自己日常学习到的一些知识点,并以文字的形式跟大家一起交流,互相学习,一个人虽可以走的更快,但一群人可以走的更远。  我是一名后端开发爱好者,工作日常接触到最多的......
  • RERCS系统开发实战案例-Part08 FPM 应用程序的表单组件(From UIBB)与列表组件(List UI
    1、新建FromUIBB的FPMApplication的快速启动面板备注:该步骤可第一步操作,也可最后一步操作,本人习惯第一步操作。1)使用事务码LPD_CUST,选择对应的角色与实例进入快速启动板定制页面;2)新建FPMApplication应用程序;注意:此处的应用程序别名用于ListUIBB的实施方法IF_FPM_G......
  • 掌握Select类,轻松实现下拉列表定位
    在Web自动化测试中,我们经常需要操作网页上的下拉列表。在Python的Selenium库中,提供了Select类来方便地处理下拉列表。本文将详细介绍如何使用Select类来实现下拉列表的定位和操作。示例代码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><titl......
  • 实现一个可以对数据列表进行筛选的功能
    在前端开发中,实现数据列表筛选是一个非常常见的功能,特别是在需要处理大量数据的应用中。无论是电商网站的商品列表筛选,还是后台管理系统的用户列表筛选,这样的功能都显得尤为重要。本文将详细介绍如何实现一个简单而高效的数据列表筛选功能,包括示例代码和关键点解析。需求分......
  • python函数声明(参数/返回值注释)和三个双引号用法
     1#python的"""三个双引号两种用法:(1)多行注释(2)定义多行字符串2deff1(ham:42,eggs:int='spam')->"Nothingtoseehere":3print("函数注释",f1.__annotations__)#函数注释{'ham':42,'eggs':<cl......
  • Objective-C — static关键字用法详解
    Static的作用在Objective-C中,static关键字有几种不同的用途,主要用于修饰全局变量、局部变量、修饰静态函数1、static修饰的静态全局变量代码#import<Foundation/Foundation.h>//由于静态变量作用域仅限于声明它的文件,所以访问和设置可以通过以下方法来访问//通过setGlob......
  • bitset详解以及用法
    butset详解以及用法bitset是C++标准库中的一个类,它提供了一种方便的方式来操作位序列,常用于位运算和状态压缩。下面我将为您详细介绍bitset的基本概念、基本用法以及一些常用的成员函数。基本概念1、bitset可以看作是一个多位二进制数,其每一位都是0或1。2、它是......
  • HTML(5)——列表表格
    列表无序列表作用:布局排列整齐的不需要规定顺序的区域。标签:ul嵌套il,ul是无序列表,li是列表条目注:ul标签只能包裹li标签,li标签可以包含任何内容有序列表作用:布局排列整齐的需要规定顺序的区域。标签:ol嵌套li,ol是有序列表。注:ol标签只能包裹li标签,li标签里面可以包裹任何......
  • 【名词解释】Unity3D物理射线(Physics Ray)含义及其用法
    Unity3D是一款流行的游戏开发引擎,它提供了一套强大的工具和功能来帮助开发者创建交互式3D内容。在Unity中,"物理射线"(PhysicsRay)通常指的是使用射线检测(Raycasting)来检测物体之间的碰撞或者检测射线与物体的交点。这在游戏开发中非常常见,用于实现如射击、视线检测、物体碰撞检......
  • Typora高级用法
    闲来无事,原本想给typora做一个ai接口的,但是突然发现,下载的人好像都特别喜欢搞创新和升级,现在的typora真的说真的升级的越来越牛了看我界面,一种高级感嘿哈是不是很牛的,所以写一篇文章来记录一下。下载插件的网址https://codeload.github.com/obgnail/typora_plugin/zip/refs......