RadioGroup在Flutter中的实现
在Flutter中,可以使用RadioGroup来实现单选按钮组。以下是一个简单的示例代码:
import 'package:flutter/material.dart';
class RadioGroupExample extends StatefulWidget {
@override
_RadioGroupExampleState createState() => _RadioGroupExampleState();
}
class _RadioGroupExampleState extends State<RadioGroupExample> {
String _selectedValue = 'Option 1';
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
RadioListTile(
title: Text('Option 1'),
value: 'Option 1',
groupValue: _selectedValue,
onChanged: (value) {
setState(() {
_selectedValue = value;
});
},
),
RadioListTile(
title: Text('Option 2'),
value: 'Option 2',
groupValue: _selectedValue,
onChanged: (value) {
setState(() {
_selectedValue = value;
});
},
),
RadioListTile(
title: Text('Option 3'),
value: 'Option 3',
groupValue: _selectedValue,
onChanged: (value) {
setState(() {
_selectedValue = value;
});
},
),
],
);
}
}
在上面的代码中,我们创建了一个RadioGroupExample
类,该类是一个StatefulWidget,内部包含了一个_selectedValue
变量来存储当前选中的值。在build
方法中,我们使用RadioListTile
来创建单选按钮,并将其放在一个Column中来显示多个单选按钮。每个RadioListTile
都有一个title
属性来显示按钮的文本内容,一个value
属性来表示按钮的值,一个groupValue
属性来表示当前选中的值,以及一个onChanged
属性来处理选中值改变的事件。当用户点击某个单选按钮时,会触发对应的onChanged
回调函数,我们在其中更新_selectedValue
的值,并调用setState
来通知Flutter更新UI。
版权声明:如无特殊标注,文章均为本站原创,转载时请以链接形式注明文章出处。
评论