chip 标签

标签控件

Chip

Material风格标签控件,提供带有文本和自定义交互的圆框。

• 构造函数

const Chip({
    super.key,
    this.avatar,//在标签前显示一个图标或小图像
    required this.label,//文本
    this.labelStyle,//label样式
    this.labelPadding,//内边距
    this.deleteIcon,//删除图标
    this.onDeleted,//点击deleteIcon时调用的函数
    this.deleteIconColor,//删除图标颜色
    this.deleteButtonTooltipMessage,//删除提示
    this.side,//边框
    this.shape,//形状，圆角
    this.clipBehavior = Clip.none,
    this.focusNode,//焦点
    this.autofocus = false,//是否主动获取焦点
    this.backgroundColor,//标签背景色
    this.padding,//标签内边距
    this.visualDensity,//控制组件紧凑性
    this.materialTapTargetSize,//单击的区域的大小
    this.elevation,//阴影
    this.shadowColor,//阴影颜色
    this.iconTheme,
    this.useDeleteButtonTooltip = true,
  }) 

• 用法

Chip(
  label: const Text('primary'),
  side: const BorderSide(
    width: 1.0,
    color: Colors.blueAccent,
  ),
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
  backgroundColor: Colors.transparent,
),

ChoiceChip

允许从一组选项中进行单个选择，创建一个类似于单选按钮的标签。

• 构造函数

const ChoiceChip({
    super.key,
    this.avatar,
    required this.label,
    this.labelStyle,
    this.labelPadding,
    this.onSelected,//择标签回调
    this.pressElevation,//按下时的阴影
    required this.selected,//是否被选
    this.selectedColor,//选中的颜色
    this.disabledColor,//没有选中的颜色
    this.tooltip,
    this.side,
    this.shape,
    this.clipBehavior = Clip.none,
    this.focusNode,
    this.autofocus = false,
    this.backgroundColor,
    this.padding,
    this.visualDensity,
    this.materialTapTargetSize,
    this.elevation,
    this.shadowColor,
    this.surfaceTintColor,
    this.iconTheme,
    this.selectedShadowColor,//被选的阴影颜色
    this.avatarBorder = const CircleBorder(),//图片的形状
  }) 

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: List<Widget>.generate(3, (index) {
    return ChoiceChip(
      // avatar:  CircleAvatar(
      //   backgroundColor: Colors.blueAccent,
      //   child: Text(item[0]),
      // ),
      elevation: 4.0,
      pressElevation: 6.0,
      label: Text('item+$index'),
      selectedColor: Colors.orange,
      selected: _choiceIndex == index,
      onSelected: (bool selected){
        setState(() {
          _choiceIndex = (selected ? index : null)!;
        });
      },
    );
  })
),

RawChip

以上两种都是基于RawChip。

• 构造函数

 const RawChip({
    super.key,
    this.defaultProperties,
    this.avatar,
    required this.label,
    this.labelStyle,
    this.padding,
    this.visualDensity,
    this.labelPadding,
    Widget? deleteIcon,
    this.onDeleted,
    this.deleteIconColor,
    this.deleteButtonTooltipMessage,
    this.onPressed,
    this.onSelected,
    this.pressElevation,
    this.tapEnabled = true,
    this.selected = false,
    this.isEnabled = true,
    this.disabledColor,
    this.selectedColor,
    this.tooltip,
    this.side,
    this.shape,
    this.clipBehavior = Clip.none,
    this.focusNode,
    this.autofocus = false,
    this.backgroundColor,
    this.materialTapTargetSize,
    this.elevation,
    this.shadowColor,
    this.surfaceTintColor,
    this.iconTheme,
    this.selectedShadowColor,
    this.showCheckmark = true,
    this.checkmarkColor,
    this.avatarBorder = const CircleBorder(),
    @Deprecated(
      'Migrate to deleteButtonTooltipMessage. '
      'This feature was deprecated after v2.10.0-0.3.pre.'
    )
    this.useDeleteButtonTooltip = true,
  }) 

用法同上。