ChoiceClip修改边框颜色和字体颜色不改变背景颜色

最新推荐文章于 2024-08-04 16:10:32 发布

ulddfhv

最新推荐文章于 2024-08-04 16:10:32 发布

阅读量1.1k

点赞数

分类专栏： Flutter

本文链接：https://blog.csdn.net/ulddfhv/article/details/91047431

版权

Flutter 专栏收录该内容

28 篇文章 3 订阅

订阅专栏

由于项目需要做一个选择效果只能单选如下图

由于刚学flutter没多久 radio带小圆圈不知道怎么去掉所以最后考虑用ChoiceChip 使用wrap包裹

代码如下:

class MyBody extends StatefulWidget {
  @override
  _MyBodyState createState() => _MyBodyState();
}

class _MyBodyState extends State<MyBody> {
  List<String> _tags = ['距离优先', '价格优先'];
  String _choice = '距离优先';

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 8,
      children: _tags.map((tag) {
        return ChoiceChip(
          label: Text(tag),
          selected: _choice == tag,
          //选中
          backgroundColor: _choice == tag ? Colors.transparent : Colors.white,
          //背景颜色
          selectedColor: Colors.transparent,
          //选中时候的颜色
          shape: StadiumBorder(
            //边框
            side: BorderSide(
                width: 1,
                color: _choice == tag ? Color(0xff44c5fe) : Colors.grey,
                style: BorderStyle.solid),
          ),
          onSelected: (isSelected) {
            setState(() {
              _choice = tag;
              debugPrint('$_choice');
            });
          },
        );
      }).toList(),
    );
  }
}