Flutter InputChip 用來實作可點選的标簽效果

程式員如果敲一會就停半天，抱着一杯茶，表情擰巴，那才是在程式設計，在之前我要實作一級标簽效果，我還在苦苦寫了好多嵌套的代碼，當我看到 Clip 時，淚奔啊，原來一個元件就可以實作，是以從事Flutter開發的小夥伴可以瞅瞅效果，萬一用上呢 。

重要消息

• ​​flutter從入門 到精通 系列文章​​

InputChip 是Material Design的一個 Widget，用來實作标簽效果，InputChip 實作的标簽可以實作點選事件以及是否選中的效果

1 基本使用效果如下

核心代碼如下：

InputChip buildChip() {
    return InputChip(
      padding: const EdgeInsets.only(left: 2),
      avatar: const CircleAvatar(
        child: Text('AB'),
      ),
      label: const Text('Aaron Burr'),
      //點選事件
      onPressed: () {
        print('onPressed click');
      },
      pressElevation: 4.0,
      isEnabled: true,
      //不可點選時的顔色
      disabledColor: Colors.grey,
      ///
      selectedColor: Colors.blue,
      selected: false,
      selectedShadowColor: Colors.deepOrange,
      onSelected: (bool select) {
        print('select click $select');
      },
    );
  }
}      

2 屬性說明

• padding 用來設定 InputChip 中的上下左右内邊距
• avatar用來設定最左側的顯示Widget，一般是個小圖示
• label 是用來設定顯示的文本
• isEnabled 為true ，InputChip 可以被點選，false，不可點選
• onPressed 是點選按鈕時響應的事件
• disabledColor InputChip 不可點選時顯示的顔色，isEnabled 為 false時
• selected 為true 時，InputChip為選中
• selectedColor 是 InputChip 為選中狀态時顯示的顔色
• selectedShadowColor 是 InputChip 選中時顯示的陰影顔色