Flutter Widgets之標籤類控制元件Chip詳解

2022-10-22 14:00:30

概述：

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 &amp;&amp; (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&lt;String&gt; _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的資料請關注it145.com其它相關文章！