Flutter单选按钮组插件simple_radio_group的使用
Flutter 单选按钮组插件 simple_radio_group
的使用
simple_radio_group
是一个简单易用的 Flutter 插件,支持表单验证和控制器。
使用
以下是一个简单的示例,展示了如何在 Flutter 应用程序中使用 simple_radio_group
插件。该插件允许你创建水平或垂直方向的单选按钮组,并且可以设置初始值、验证器等属性。
import 'package:flutter/material.dart';
import 'package:simple_radio_group/simple_radio_group.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const SimpleRadioGroupExample(),
);
}
}
class SimpleRadioGroupExample extends StatelessWidget {
const SimpleRadioGroupExample({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Simple radio group example"),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text("水平方向"),
SimpleRadioGroup<String>(
direction: Axis.horizontal, // 设置为水平方向
initialValue: "Option 1", // 设置初始值
validator: (String? option) { // 验证器函数
if (option == null) {
return "请选择一个选项"; // 如果未选择任何选项,则返回错误信息
}
return null; // 如果选择了选项,则返回 null
},
options: const [ // 可供选择的选项列表
"Option 1",
"Option 2",
"Options 3",
],
),
const SizedBox(
height: 22,
),
const Text("垂直方向"),
SimpleRadioGroup<String>( // 创建垂直方向的单选按钮组
direction: Axis.vertical, // 设置为垂直方向
validator: (String? option) { // 验证器函数
if (option == null) {
return "请选择一个选项"; // 如果未选择任何选项,则返回错误信息
}
return null; // 如果选择了选项,则返回 null
},
options: const [ // 可供选择的选项列表
"Option 1",
"Option 2",
"Options 3",
],
),
],
),
),
);
}
}
更多关于Flutter单选按钮组插件simple_radio_group的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter单选按钮组插件simple_radio_group的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
simple_radio_group
是一个用于在 Flutter 中创建单选按钮组的简单而有效的插件。它允许你轻松地创建一组单选按钮,并在用户选择某个选项时获取所选值。
安装插件
首先,你需要在 pubspec.yaml
文件中添加 simple_radio_group
插件的依赖:
dependencies:
flutter:
sdk: flutter
simple_radio_group: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get
来安装插件。
使用 simple_radio_group
以下是一个简单的示例,展示了如何使用 simple_radio_group
插件来创建一个单选按钮组,并获取用户选择的值。
import 'package:flutter/material.dart';
import 'package:simple_radio_group/simple_radio_group.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: RadioGroupExample(),
);
}
}
class RadioGroupExample extends StatefulWidget {
@override
_RadioGroupExampleState createState() => _RadioGroupExampleState();
}
class _RadioGroupExampleState extends State<RadioGroupExample> {
String? selectedValue;
final List<String> options = ["Option 1", "Option 2", "Option 3"];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Simple Radio Group Example'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
SimpleRadioGroup(
options: options,
onSelected: (value) {
setState(() {
selectedValue = value;
});
},
),
SizedBox(height: 20),
Text(
'Selected Value: $selectedValue',
style: TextStyle(fontSize: 18),
),
],
),
),
);
}
}
代码解释
-
导入插件:
import 'package:simple_radio_group/simple_radio_group.dart';
-
定义选项:
final List<String> options = ["Option 1", "Option 2", "Option 3"];
-
创建单选按钮组:
SimpleRadioGroup( options: options, onSelected: (value) { setState(() { selectedValue = value; }); }, )
options
: 单选按钮组的选项列表。onSelected
: 当用户选择一个选项时触发的回调函数,value
是用户选择的选项。
-
显示选中的值:
Text( 'Selected Value: $selectedValue', style: TextStyle(fontSize: 18), )
自定义样式
SimpleRadioGroup
提供了一些属性来自定义单选按钮的样式,例如:
activeColor
: 选中时的颜色。textStyle
: 选项文本的样式。direction
: 单选按钮的排列方向(Axis.horizontal
或Axis.vertical
)。
例如:
SimpleRadioGroup(
options: options,
onSelected: (value) {
setState(() {
selectedValue = value;
});
},
activeColor: Colors.blue,
textStyle: TextStyle(fontSize: 16, color: Colors.black),
direction: Axis.vertical,
)