flutter - 如何在 Flutter 中使我的单选按钮完全填充活动颜色的颜色而没有白色边框?
问题描述
我想用一种颜色完全填充我的单选按钮。像这样
目前单选按钮默认提供此布局。
那么我该如何改变呢?
我的代码
Radio(
value: 3,
groupValue: radioValue,
onChanged: onChanged,
fillColor: MaterialStateColor.resolveWith(
(states) => Colors.lightBlueAccent),
),
请帮忙
解决方案
您可以创建自己的收音机小部件来实现此目的:
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)});
推荐阅读
- java - 如何在 JSP 中调用 Class 方法?
- php - 如何将值从from传递到sql查询
- dynamics-crm - 如何在 Dynamics 中创建自定义通知
- ios - 在 iOS 中为 Today Extension(Widget) 安装 pod
- javascript - 如何将指示点数的段落值转换为数字的javascript值
- openedx - 如何修复 Open edX 证书中的审计跟踪问题
- javascript - 如何定位一个复选框并根据其值显示输入字段
- nginx - nginx 处理 http 和非 www url 的重定向和重写
- oracle - 如何防止用户在 Oracle 中的其他模式上查询 SELECT?
- c++ - 为什么 omp_set_dynamic(1) 从不调整线程数(在 Visual C++ 中)?