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(),
    );
  }
}
复制代码

• 效果