Chip类控件(Chip、InputChip、ChoiceChip、FilterChip、ActionChip)

最新推荐文章于 2024-09-01 13:30:00 发布

laying_1230

最新推荐文章于 2024-09-01 13:30:00 发布

阅读量1.4k

点赞数 1

分类专栏： flutter实战

本文链接：https://blog.csdn.net/qq_34511364/article/details/117985073

版权

本文介绍了Material设计风格中的各种Chip控件，包括RawChip、Chip、InputChip、ChoiceChip、FilterChip和ActionChip，详细阐述了它们的特性和用法，并提供了多个示例展示不同配置下的效果，如禁用状态、删除功能、选中状态、自定义样式等。

摘要由CSDN通过智能技术生成

RawChip

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

Chip
InputChip
ChoiceChip
FilterChip
ActionChip

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

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

基本用法如下：

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

效果如下：

禁用状态设置：

RawChip(
  label: Text('唐德'),
  isEnabled: false,
)

效果如下：

设置左侧控件，一般是图标：

RawChip(
  avatar: CircleAvatar(
    child: Text('德'),
  ),
  label: Text('唐德'),
)

效果如下：

设置label的样式和内边距：

RawChip(
   avatar: CircleAvatar(
      child: Text('德'),
   ),
   label: Text('唐德'),
   labelStyle: TextStyle(color: Colors.red),
   labelPadding: EdgeInsets.symmetric(horizontal: 10),
),

效果如下：

设置删除相关属性：

RawChip(
  avatar: CircleAvatar(
    child: Text('德'),
  ),
  label: Text('唐德'),
  labelStyle: TextStyle(color: Colors.red),
  labelPadding: EdgeInsets.symmetric(horizontal: 10),
  deleteIcon: Icon(Icons