Flutter元件之ChoiceChip教程

簡介

ChoiceChip 代表一個單一的選擇，一般用於從一組選項中進行單選。

最簡單演示

未選中

• 未選中 - code

      Center(
        child: ChoiceChip(
          label: Text("This is ChoiceChip"),
          selected: false,
        ),
      ),
複製程式碼

• 未選中 - 效果

選中

• 選中 - code

      Center(
        child: ChoiceChip(
          label: Text("This is ChoiceChip"),
          selected: true,
        ),
      ),
複製程式碼

• 選中 - 效果

常用屬性

屬性名	是否必須	描述
label	Y	標籤的文字描述
selected	Y	是否選中
avatar	N	左側小圖示
labelStyle	N	標籤文字的樣式
selectedColor	N	選中時的顏色
selectedShadowColor	N	選中時的陰影顏色
elevation	N	陰影大小

• code

      Center(
        child: ChoiceChip(
          label: Text("This is ChoiceChip"),
          labelStyle: TextStyle(
            color: Colors.black,
            fontSize: 16
          ),
          selected: true,
          avatar: Image.asset("assets/images/flutter.png"),
          selectedColor: Colors.orangeAccent.withAlpha(39),
          selectedShadowColor: Colors.orangeAccent,
          elevation: 30,
        ),
      )
複製程式碼

• 效果

列表中單選使用舉例

class MyThreeOptions extends StatefulWidget {
  @override
  _MyThreeOptionsState createState() => _MyThreeOptionsState();
}

class _MyThreeOptionsState extends State<MyThreeOptions> {
  int _value = 1;

  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: List<Widget>.generate(
        3,
            (int index) {
          return ChoiceChip(
            label: Text('Item $index'),
            avatar: Image.asset("assets/images/flutter.png"),
            selectedColor: Colors.orangeAccent.withAlpha(39),
            selectedShadowColor: Colors.orangeAccent,
            elevation: 3,
            selected: _value == index,
            onSelected: (bool selected) {
              setState(() {
                _value = selected ? index : null;
              });
            },
          );
        },
      ).toList(),
    );
  }
}
複製程式碼

• 效果