如何在 Flutter 中使我的单选按钮完全填充活动颜色的颜色而没有白色边框?

Posted

技术标签:

【中文标题】如何在 Flutter 中使我的单选按钮完全填充活动颜色的颜色而没有白色边框?【英文标题】:How do I make my radio button fully filled with color in active color without white borders in Flutter? 【发布时间】:2021-09-15 10:41:49 【问题描述】:

我想用一种颜色完全填充我的单选按钮。 像这样

目前单选按钮默认采用这种布局。

那么我该如何改变呢?

我的代码

Radio(
                    value: 3,
                    groupValue: radioValue,
                    onChanged: onChanged,
                    fillColor: MaterialStateColor.resolveWith(
                        (states) => Colors.lightBlueAccent),
                  ),

请帮忙

【问题讨论】:

使用 Container() 和手势检测器创建您自己的自定义小部件,并在点击时用颜色填充容器,现在要获取点击了哪个容器,请使用可以返回您点击的索引的列表视图构建器容器。等待生病编写和编码并将其发布为您会更好理解的答案 【参考方案1】:

您可以创建自己的收音机小部件来实现此目的:

class FilledRadio<T> extends StatelessWidget 
  final T value;
  final T groupValue;
  final ValueChanged<T> onChanged;
  final double radius;
  final Color color;

  FilledRadio(
      required this.value,
      required this.groupValue,
      required this.onChanged,
      this.radius = 16,
      this.color = const Color(0xFF49EF3E));

  @override
  Widget build(BuildContext context) 
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: GestureDetector(
        onTap: () 
          onChanged(this.value);
        ,
        child: Container(
          height: this.radius * 2,
          width: this.radius * 2,
          decoration: ShapeDecoration(
            shape: CircleBorder(),
            color: color,
          ),
          child: Center(
            child: Container(
              height: (this.radius * 2) - 8,
              width: (this.radius * 2) - 8,
              decoration: ShapeDecoration(
                shape: CircleBorder(),
                color: value == groupValue
                    ? color
                    : Theme.of(context).scaffoldBackgroundColor,
              ),
            ),
          ),
        ),
      ),
    );
  

你可以像这样使用它:

Row(
   mainAxisAlignment: MainAxisAlignment.center,
   children: <Widget>[
      FilledRadio(
        value: "0",
        radius: 20,
        color: Colors.redAccent,
        groupValue: _radValue,
        onChanged: (String value) 
          setState(() 
            _radValue = value;
          );
        ,
      ),
      FilledRadio(
        value: "1",
        radius: 16,
        color: Colors.red,
        groupValue: _radValue,
        onChanged: (String value) 
          setState(() 
            _radValue = value;
          );
        ,
      ),
      FilledRadio(
        value: "2",
        radius: 12,
        color: Colors.amber,
        groupValue: _radValue,
        onChanged: (String value) 
          setState(() 
            _radValue = value;
          );
        ,
      ),
      FilledRadio(
        value: "3",
        radius: 16,
        color: Colors.green,
        groupValue: _radValue,
        onChanged: (String value) 
          setState(() 
            _radValue = value;
          );
        ,
      ),
      FilledRadio(
        value: "4",
        radius: 20,
        color: Colors.greenAccent,
        groupValue: _radValue,
        onChanged: (String value) 
          setState(() 
            _radValue = value;
          );
        ,
      ),
   ],
),

它看起来像:

注意:此实现仅支持 dart 2.12.0 及更高版本。如果您尝试在旧版本的 dart 中使用它,只需将构造函数更改为:

FilledRadio(
      @required this.value,
      @required this.groupValue,
      @required this.onChanged,
      this.radius = 16,
      this.color = const Color(0xFF49EF3E));

【讨论】:

以上是关于如何在 Flutter 中使我的单选按钮完全填充活动颜色的颜色而没有白色边框?的主要内容,如果未能解决你的问题,请参考以下文章

如何根据淘汰赛js中的单选按钮选择填充文本框

使用来自数据库 Laravel Blade 的数据填充单选按钮

需要根据 reactjs 中的单选按钮输入填充值

颤动 - 如何在颤动中保存状态选择的单选按钮列表?

使用 ng-model 进行 ng-checked 的单选按钮

如何根据访问者联系记录预选单选按钮