如何在 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 中使我的单选按钮完全填充活动颜色的颜色而没有白色边框?的主要内容,如果未能解决你的问题,请参考以下文章
使用来自数据库 Laravel Blade 的数据填充单选按钮