我想用单一颜色完全填充我的单选按钮。 像这样
目前单选按钮默认提供此布局。
那么我该如何改变这个呢?
我的代码
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)});
上面分享的答案效果很好。但是,就我而言,我需要在按钮旁边显示文本。为了实现这一目标,我更新了代码,如下所示:
import 'package:flutter/material.dart';
class FilledRadio<T> extends StatelessWidget {
final T value;
final T groupValue;
final ValueChanged<T> onChanged;
final double radius;
final Color color;
final title;
FilledRadio({
required this.title,
required this.value,
required this.groupValue,
required this.onChanged,
this.radius = 16,
this.color = const Color(0xFF49EF3E),
});
@override
Widget build(BuildContext context) {
return Row(
children: [
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) - 4,
width: (this.radius * 2) - 4,
decoration: ShapeDecoration(
shape: CircleBorder(),
color: value == groupValue
? color
: Theme.of(context).scaffoldBackgroundColor,
),
),
),
),
),
),
GestureDetector(
onTap: () {
onChanged(this.value);
},
child: Text(
title,
style: TextStyle(fontSize: 16, color: secondaryTextColor),
),
),
],
);
}
}
使用示例
FilledRadio(
title: "Wallet",
radius: 10,
value: PaymentMethod.wallet.name,
groupValue: checkoutController
.paymentMethod.value,
onChanged: (value) {
checkoutController.setPaymentMethod(
value.toString());
},
);
结果如下图: