Flutter Widgets之标签类控件Chip详解

目录
  • 概述:
  • RawChip
  • Chip
  • InputChip
  • ChoiceChip
  • FilterChip
  • 总结:

概述:

Flutter 标签类控件大全ChipFlutter内置了多个标签类控件,但本质上它们都是同一个控件,只不过是属性参数不同而已,在学习的过程中可以将其放在放在一起学习,方便记忆。

RawChip

Material风格标签控件,此控件是其他标签控件的基类,通常情况下,不会直接创建此控件,而是使用如下控件:

  • Chip
  • InputChip
  • ChoiceChip
  • FilterChip
  • ActionChip

如果你想自定义标签类控件,通常使用此控件。

RawChip可以通过设置onSelected被选中,设置onDeleted被删除,也可以通过设置onPressed而像一个按钮,它有一个label属性,有一个前置(avatar)和后置图标(deleteIcon)。

 RawChip(label: Text('RawChip')),

效果:

设置左侧控件,一般是图标:

 RawChip(
            avatar: CircleAvatar(child: Text('R'),),
            label: Text('RawChip'),
            isEnabled: false,//禁止点选状态
          ),

设置label的样式和内边距:

 RawChip(
            avatar: CircleAvatar(child: Text('R'),),
            label: Text('RawChip'),
            // isEnabled: false,//禁止点选状态
            labelPadding: EdgeInsets.symmetric(horizontal: 20),
            padding: EdgeInsets.only(left: 10,right: 10,top: 5),
          ),

设置删除相关属性:

  RawChip(
            label: Text('RawChip'),
            onDeleted: (){
              print('onDeleted');
            },
            deleteIcon: Icon(Icons.delete),
            deleteIconColor: Colors.red,
            deleteButtonTooltipMessage: "删除",
            // isEnabled: false,//禁止点选状态
            labelPadding: EdgeInsets.symmetric(horizontal: 10),
            padding: EdgeInsets.only(left: 10,right: 10,top: 5,bottom: 5),
          ),

设置形状、背景颜色及内边距,阴影:

 RawChip(
            label: Text('RawChip'),
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
            backgroundColor: Colors.blue,
            padding: EdgeInsets.symmetric(vertical: 10),
            elevation: 8,
            shadowColor: Colors.grey,
          )

materialTapTargetSize是配置组件点击区域大小的属性,很多组件都有此属性,比如:

[FloatingActionButton], only the mini tap target size is increased.
* [MaterialButton]
* [OutlineButton]
* [FlatButton]
* [RaisedButton]
* [TimePicker]
* [SnackBar]
* [Chip]
* [RawChip]
* [InputChip]
* [ChoiceChip]
* [FilterChip]
* [ActionChip]
* [Radio]
* [Switch]
* [Checkbox]

MaterialTapTargetSize有2个值,分别为:

  • padded:最小点击区域为48*48。
  • shrinkWrap:子组件的实际大小。

设置选中状态、颜色:

 RawChip(
              label: Text('RawChip'),
               selected: _selected,
            onSelected: (v){
                setState(() {
                  _selected =v;
                });
            },
            selectedColor: Colors.blue,
            selectedShadowColor: Colors.red,
          )

Chip

Chip是一个简单的标签控件,仅显示信息和删除相关属性,是一个简化版的RawChip,用法和RawChip一样。源代码如下:

@override
Widget build(BuildContext context) {
  assert(debugCheckHasMaterial(context));
  return RawChip(
    avatar: avatar,
    label: label,
    labelStyle: labelStyle,
    labelPadding: labelPadding,
    deleteIcon: deleteIcon,
    onDeleted: onDeleted,
    deleteIconColor: deleteIconColor,
    deleteButtonTooltipMessage: deleteButtonTooltipMessage,
    tapEnabled: false,
    shape: shape,
    clipBehavior: clipBehavior,
    focusNode: focusNode,
    autofocus: autofocus,
    backgroundColor: backgroundColor,
    padding: padding,
    materialTapTargetSize: materialTapTargetSize,
    elevation: elevation,
    shadowColor: shadowColor,
    isEnabled: true,
  );
}

InputChip

以紧凑的形式表示一条复杂的信息,例如实体(人,地方或事物)或对话文本。

InputChip 本质上也是RawChip,用法和RawChip一样。源代码如下:

override
Widget build(BuildContext context) {
  assert(debugCheckHasMaterial(context));
  return RawChip(
    avatar: avatar,
    label: label,
    labelStyle: labelStyle,
    labelPadding: labelPadding,
    deleteIcon: deleteIcon,
    onDeleted: onDeleted,
    deleteIconColor: deleteIconColor,
    deleteButtonTooltipMessage: deleteButtonTooltipMessage,
    onSelected: onSelected,
    onPressed: onPressed,
    pressElevation: pressElevation,
    selected: selected,
    tapEnabled: true,
    disabledColor: disabledColor,
    selectedColor: selectedColor,
    tooltip: tooltip,
    shape: shape,
    clipBehavior: clipBehavior,
    focusNode: focusNode,
    autofocus: autofocus,
    backgroundColor: backgroundColor,
    padding: padding,
    materialTapTargetSize: materialTapTargetSize,
    elevation: elevation,
    shadowColor: shadowColor,
    selectedShadowColor: selectedShadowColor,
    showCheckmark: showCheckmark,
    checkmarkColor: checkmarkColor,
    isEnabled: isEnabled && (onSelected != null || onDeleted != null || onPressed != null),
    avatarBorder: avatarBorder,
  );
}

基本用法:

 InputChip(
    avatar: CircleAvatar(
    radius: 12.0,
    ),
    label: Text(
    'InputChip',
    style: TextStyle(fontSize: 12.0),
    ),
    shadowColor: Colors.grey,
    deleteIcon: Icon(
    Icons.close,
    color: Colors.black54,
    size: 14.0,
    ),
    onDeleted: () {
      print('onDeleted');
    },
    onSelected: (bool selected) {
        setState(() {
          _selected = selected;
        });
    },
    selectedColor: Colors.orange,
    disabledColor: Colors.grey,
    selected: _selected,
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    labelStyle: TextStyle(color: Colors.black54),
    ),

ChoiceChip

允许从一组选项中进行单个选择,创建一个类似于单选按钮的标签,本质上ChoiceChip也是一个RawChip,ChoiceChip本身不具备单选属性。

  int _selectedIndex = 0;
 Wrap(
            spacing: 5,
            children: List.generate(20, (index){
            return ChoiceChip(
                label: Text('测试 $index'),
                selected: _selectedIndex==index,
              onSelected: (v){
                  setState(() {
                    _selectedIndex =index;
                  });
              },
            );
          }).toList(),
          )

FilterChip

FilterChip可以作为过滤标签,本质上也是一个RawChip,用法如下:

  List<String> _filters = [];
 _buildFilterChip(){
    return Column(
      children: [
        Wrap(
          spacing: 15,
          children: List.generate(10, (index) {
            return FilterChip(
              label: Text('测试 $index'),
              selected: _filters.contains('$index'),
              onSelected: (v) {
                setState(() {
                  if(v){
                    _filters.add('$index');
                  }else{
                    _filters.removeWhere((f){
                      return f == '$index';
                    });
                  }
                });
              },
            );
          }).toList(),
        ),
        Text('选中:${_filters.join(',')}'),
      ],
    );
  }

运行效果:

总结:

本篇主要讲了以下几种chip组件的用法案例:

  • RawChip:是Material风格标签控件,此控件是其他标签控件的基类,通常情况下,不会直接创建此控件,而是使用其他的标签控件。
  • InputChip:以紧凑的形式表示一条复杂的信息,例如实体(人,地方或事物)或对话文本。InputChip 本质上也是RawChip,用法和RawChip一样
  • ChoiceChip:允许从一组选项中进行单个选择,创建一个类似于单选按钮的标签,本质上ChoiceChip也是一个RawChip,ChoiceChip本身不具备单选属性。
  • FilterChip:可以作为过滤标签,本质上也是一个RawChip
  • ActionChip:显示与主要内容有关的一组动作,本质上也是一个RawChip
  • Chip:一个简单的标签控件,仅显示信息和删除相关属性,是一个简化版的RawChip,用法和RawChip一样

以上就是Flutter Widgets之标签类控件Chip详解的详细内容,更多关于Flutter Widgets标签类控件Chip的资料请关注我们其它相关文章!

时间: 2022-10-18

Flutter 日期时间DatePicker控件及国际化

最近在学习Flutter,今天正好看到一篇文章收藏下来做个笔记,也分享给大家. 注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 DatePicker Flutter并没有DatePicker这个控件,需要使用showDatePicker方法弹出日期选择控件,基本用法如下: RaisedButton( onPressed: () async { var result = await showDatePic

Flutter折叠控件使用方法详解

本文实例为大家分享了Flutter折叠控件使用的具体代码,供大家参考,具体内容如下 1.官方折叠控件ExpansionTiles 官方默认提供了一个折叠控件 ExpansionTiles 主要用于listView做折叠和展开操作的,先来看看一般的用法 Widget _buildTiles(Entry root) {     return new ExpansionTile(       title: new Text(root.title),       children: root.child

Flutter源码分析之自定义控件(RenderBox)指南

目录 前言 RenderObject 类继承层级解析 RenderBox 叶节点与父节点 控件的测量与布局 performResize 和 performLayout relayoutBoundary 叶节点 父节点 ParentData ParentData BoxParentData ContainerBoxParentData ContainerParentDataMixin 测量 child 大小 布局 child 控件的绘制 绘制自身内容 绘制 child repaintBoundar

Flutter构建自定义Widgets的全过程记录

目录 一.组合widget实现 二.通过自定义CustomPainter实现widgets 三.饼状图piechart.dart代码展示 四.实际效果图,eg: 附:Flutter中父widget调用子widget的方法 总结 一.组合widget实现 1.android和flutter自定义控件对比 Android中,一般会继承View或已经存在的某个控件,然后覆盖draw方法来实现自定义View.在Flutter中,一个自定义widget通常是通过组合其它widget来实现的,而不是继承.下

Flutter开发Widgets 之 PageView使用示例

目录 构造方法以及参数: 基本用法 无限滚动 实现指示器 切换动画 总结: 构造方法以及参数: PageView可用于Widget的整屏滑动切换,如当代常用的短视频APP中的上下滑动切换的功能,也可用于横向页面的切换,如APP第一次安装时的引导页面,也可用于开发轮播图功能. PageView({ Key? key, this.scrollDirection = Axis.horizontal, // 设置滚动方向 垂直 / 水平 this.reverse = false, // 反向滚动 Pag

Flutter 分页功能表格控件详细解析

前2天有读者问到是否有带分页功能的表格控件,今天分页功能的表格控件详细解析. PaginatedDataTable PaginatedDataTable是一个带分页功能的DataTable,生成一批数据,项目中此一般通过服务器获取,定义model类: class User { User(this.name, this.age, this.sex); final String name; final int age; final String sex; } 生成数据: List<User> _d

Qt GUI图形图像开发之QT表格控件QTableView,QTableWidget复杂表头(多行表头) 及冻结、固定特定的行的详细方法与实例

我们在开发过程中对于表格使用频率还是挺高的,使用QT框架开发时候我们使用QTableView或者QTableWidget创建表格. 其中表格分为 表格头与表格体: 对于简单地表格,我们可以设置表头来满足我们的要求(当然也可以隐藏表头),不过对于定制化的表头,我们能做的不是特别多.特别是对于复杂的表头,使用自带的表头,无论怎么设置都不太可能达到需求.例如我最近接到的一个项目,需求是: 我们分析一下这个表格有什么特点: 1.表头不是简单的一行,而是两行. 2.表头有单元格的合并. 3.部分表头中间有

python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例

PyQt5表格控件QTableView简介 在通常情况下,一个应用需要和一批数据进行交互,然后以表格的形式输出这些信息,这时就需要用到QTableView类了,在QTableView中可以使用自定义的数据模型来显示内容,通过setModel来绑定数据源 QTableWidget继承自QTableView,主要区别是QTableView可以使用自定义的数据模型来显示内容(先通setModel来绑定数据源),而QTableWidget自能使用标准的数据模型,并且其单元格数据是通过QTableWidg

Qt GUI图形图像开发之QT表格控件QTableView详细使用方法与实例

QT表格控件QTableView简介 ​ 表格视图控件QTableView,需要和QStandardItemModel, 配套使用,这套框架是基于MVC设计模式设计的,M(Model)是QStandardItemModel数据模型,不能单独显示出来.V(view)是指QTableView视图,要来显示数据模型,C(controllor)控制在Qt中被弱化,与View合并到一起. QTableView简单使用实例 ​ QStandardItmeModel表格的数据模型,那么这个模型需要填上每一行每

Python深度学习实战PyQt5基本控件使用解析

目录 1. PyQt5 控件简介 1.1 什么是控件 1.2 编辑控件的属性 1.3 PyQt5 的控件类型 输入控件: 显示控件: 高级控件: 2. 按钮控件 2.1 按钮控件简介 2.2 按键按钮(QPushButton) 2.3 其它按钮 3. 输入控件 3.1 输入控件简介 3.2 文本输入控件 3.3 调节输入控件 4. Python 应用程序调用图形界面 1. PyQt5 控件简介 1.1 什么是控件 控件也称控件对象,是 Qt用户界面上最基本的组件类型,也是构成用户界面的基本结构.

ExtJS 配置和表格控件使用第1/2页

ExtJS是一套完整的RIA解决方案,也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现,对客户端机器性能也有一定的要求,即不支持IE6以下的版本.如果您的项目对网页响应时间有严格的限制,或者客户端操作系统过于陈旧,一定不要选择ExtJS. 本文主要是介绍ExtJS的下载和配置以及一些简单的使用方法.目前最新版本为3.0,但是本文主要介绍2.2版本. 一.ExtJS下载以及配置 1.下载地址:www.extjs.com/(这是官网,大家可以选择自己喜欢的版本下

JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件

dotNetFlexGrid是一款asp.net原生的异步表格控件,他的前身是Jquery FlexiGrid插件,我们重构了FlexiGrid的大部分Javascript代码,使其工作的更有效率,BUG更少:同时将其封装为dotNet控件,提供了简单易用的使用方式. dotNetFlexGrid扩展和优化了FlexiGrid原有的功能,并提供了更多具有针对性的功能,使用dotNetFlexGrid,您的用户可以轻松拥有如下功能 提供简易的方式自行调整表格列宽 根据实际情况调整表格的大小 针对合

在web中js实现类似excel的表格控件

Execl功能非常强大,内置的很多函数或公式可以大大提高对数据的加工处理能力.那么在web中有没有类似的控件呢?经过一番搜寻,发现handsontable具备了基本的excel功能支持公式,同时能对数据进行实时编辑.另外支持拖动复制.Ctrl+C .Ctrl+V 等等.在浏览器支持方面,它支持以下的浏览器: IE7+, FF, Chrome, Safari, Opera. 首先引入相关库文件,公式支持不包含在handsontable.full.js中,需要单独引入: <script src=&quo

详解能在多种前端框架下使用的表格控件

近几年Web前端框架特别流行,比如AngularJS.AngularJS 2.ReactJS.KnockoutJS.VueJS等.表格控件是我们在开发中经常要用到的控件.有没有能够在多种前端控件下都能使用的表格控件?最近研究发现Wijmo中的FlexGrid是一款不错的表格控件,它能支持很多主流的框架.这里主要介绍在纯JavaScript和AngularJS下FlexGrid的使用. 一.在纯JavaScript下使用FlexGrid HTML文件: <!DOCTYPE html> <h

Qt学习教程之表格控件蚂蚁线详解

一.蚂蚁线 摘自互动百科:在图像影像软件中表示选区的动态虚线,因为虚线闪烁的样子像是一群蚂蚁在跑,所以俗称蚂蚁线.在Poshop,After Effect等软件中比较常见. 背景:用过excel的同学都知道,当对单元格进行复制时,单元格周围就会出现一个跑动的矩形框,这个矩形框就被称为蚂蚁线.通过设置蚂蚁线的线型和调整控件有效刷新次数我们可以得到不同的跑动效果,这是一个非常有意思的现象. 本文将给大家详细介绍关于Qt表格控件蚂蚁线的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的