Flutter 基于ChoiceChip的标签选择控件

最新推荐文章于 2025-06-06 14:57:50 发布

转载

最新推荐文章于 2025-06-06 14:57:50 发布 · 2.9k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5d098cb751882542fc3336fb

文章标签：

#移动开发 #ui

本文介绍了如何使用Flutter的ChoiceChip组件创建标签选择控件。通过封装MultiNormalSelectChip，实现了从BaseSelectEntity实体类动态生成ChoiceChip，并通过回调函数管理选中状态。同时，展示了如何根据UI需求修改ChoiceChip的样式，增加selectShape属性以满足定制化需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.ChoiceChip

ChoiceChip 选择控件，可以实现单选效果

先看对应的属性

 const ChoiceChip({
    Key key,
    this.avatar, //左侧Widget 一般小图标
    @required this.label, //标签文字
    this.labelStyle, //标签文字的样式
    this.labelPadding, 
    this.onSelected, 
    this.pressElevation, 
    @required this.selected, //是否选中
    this.selectedColor, //选择的颜色
    this.disabledColor, //不可用的颜色
    this.tooltip, 
    this.shape, //shape 默认是两端半圆形
    this.clipBehavior = Clip.none,
    this.backgroundColor, //背景色
    this.padding, 
     //设置为MaterialTapTargetSize.shrinkWrap时
     //，clip距顶部距离为0；设置为MaterialTapTarget
     //Size.padded时距顶部有一个距离
    this.materialTapTargetSize,
    this.elevation,
    this.shadowColor,//阴影背景色
    this.selectedShadowColor,//选中的阴影背景色
    this.avatarBorder = const CircleBorder(),
  })
复制代码

默认的情况下，ChoiceChip 选择主要是修改背景色以及对应的文字，