Flutter分组按钮插件grouped_buttons_ns的使用
Flutter分组按钮插件grouped_buttons_ns的使用
grouped_buttons_ns 是一个用于简化 Flutter 中复选框和单选按钮分组的插件。
安装
在 pubspec.yaml 文件中添加以下依赖：
dependencies:
grouped_buttons_ns:
简单用法
创建基本的复选框组 (CheckboxGroup)
CheckboxGroup(
labels: [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday",
],
onSelected: (List<String> checked) => print(checked.toString())
);
创建基本的单选按钮组 (RadioButtonGroup)
RadioButtonGroup(
labels: [
"Option 1",
"Option 2",
],
onSelected: (String selected) => print(selected)
);
示例截图
自定义用法
自定义复选框组 (CheckboxGroup)
List<String> _checked = ["A", "B"];
CheckboxGroup(
orientation: GroupedButtonsOrientation.HORIZONTAL,
margin: const EdgeInsets.only(left: 12.0),
onSelected: (List selected) => setState(() {
_checked = selected;
}),
labels: [
"A",
"B",
],
checked: _checked,
itemBuilder: (Checkbox cb, Text txt, int i) {
return Column(
children: [
Icon(Icons.polymer),
cb,
txt,
],
);
},
);
自定义单选按钮组 (RadioButtonGroup)
String _picked = "Two";
RadioButtonGroup(
orientation: GroupedButtonsOrientation.HORIZONTAL,
margin: const EdgeInsets.only(left: 12.0),
onSelected: (String selected) => setState(() {
_picked = selected;
}),
labels: [
"One",
"Two",
],
picked: _picked,
itemBuilder: (Radio rb, Text txt, int i) {
return Column(
children: [
Icon(Icons.public),
rb,
txt,
],
);
},
);
示例截图
完整示例代码
/*
Name: Akshath Jain
Date: 3/15/19
Purpose: example app for the grouped buttons package
*/
import 'package:flutter/material.dart';
import 'package:grouped_buttons_ns/grouped_buttons_ns.dart';
class GroupedButtonExample extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Grouped Buttons Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
[@override](/user/override)
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<String> _checked = ['A', 'B'];
String _picked = 'Two';
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Grouped Buttons Example'),
),
body: _body(),
);
}
Widget _body() {
return ListView(children: [
// --------------------
// SIMPLE USAGE EXAMPLE
// --------------------
// BASIC CHECKBOXGROUP
Container(
padding: const EdgeInsets.only(left: 14.0, top: 14.0),
child: Text(
'Basic CheckboxGroup',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
),
),
CheckboxGroup(
labels: [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
],
disabled: ['Wednesday', 'Friday'],
onChange: (bool isChecked, String label, int index) =>
print('isChecked: $isChecked label: $label index: $index'),
onSelected: (List<String> checked) =>
print('checked: ${checked.toString()}'),
),
// BASIC RADIOBUTTONGROUP
Container(
padding: const EdgeInsets.only(left: 14.0, top: 14.0),
child: Text(
'Basic RadioButtonGroup',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
),
),
RadioButtonGroup(
labels: [
'Option 1',
'Option 2',
],
disabled: ['Option 1'],
onChange: (String label, int index) =>
print('label: $label index: $index'),
onSelected: (String label) => print(label),
),
// --------------------
// CUSTOM USAGE EXAMPLE
// --------------------
/// CUSTOM CHECKBOX GROUP
Container(
padding: const EdgeInsets.only(left: 14.0, top: 14.0, bottom: 14.0),
child: Text(
'Custom CheckboxGroup',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
),
),
CheckboxGroup(
orientation: GroupedButtonsOrientation.HORIZONTAL,
margin: const EdgeInsets.only(left: 12.0),
onSelected: (List<String> selected) => setState(() {
_checked = selected;
}),
labels: [
'A',
'B',
],
checked: _checked,
itemBuilder: (Checkbox cb, Text txt, int i) {
return Column(
children: [
Icon(Icons.polymer),
cb,
txt,
],
);
},
),
/// CUSTOM RADIOBUTTON GROUP
Container(
padding: const EdgeInsets.only(left: 14.0, top: 14.0, bottom: 14.0),
child: Text(
'Custom RadioButtonGroup',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
),
),
RadioButtonGroup(
orientation: GroupedButtonsOrientation.HORIZONTAL,
margin: const EdgeInsets.only(left: 12.0),
onSelected: (String selected) => setState(() {
_picked = selected;
}),
labels: [
'One',
'Two',
],
picked: _picked,
itemBuilder: (Radio rb, Text txt, int i) {
return Column(
children: [
Icon(Icons.public),
rb,
txt,
],
);
},
),
]);
}
}
更多关于Flutter分组按钮插件grouped_buttons_ns的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter分组按钮插件grouped_buttons_ns的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
grouped_buttons_ns 是一个用于 Flutter 的分组按钮插件，它允许你创建单选按钮组或复选框按钮组。这个插件提供了简单易用的 API 来构建用户界面中的选择控件。
安装
首先，你需要在 pubspec.yaml 文件中添加依赖：
dependencies:
flutter:
sdk: flutter
grouped_buttons_ns: ^1.0.0 # 请根据实际情况使用最新版本
然后运行 flutter pub get 来安装依赖。
使用
1. 单选按钮组 (RadioButtonGroup)
单选按钮组允许用户从一组选项中选择一个选项。
import 'package:flutter/material.dart';
import 'package:grouped_buttons_ns/grouped_buttons_ns.dart';
class MyRadioButtonGroup extends StatefulWidget {
@override
_MyRadioButtonGroupState createState() => _MyRadioButtonGroupState();
}
class _MyRadioButtonGroupState extends State<MyRadioButtonGroup> {
String _selectedOption = 'Option 1';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Radio Button Group'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
RadioButtonGroup(
labels: <String>[
'Option 1',
'Option 2',
'Option 3',
],
onSelected: (String selected) {
setState(() {
_selectedOption = selected;
});
},
selected: _selectedOption,
),
SizedBox(height: 20),
Text('Selected Option: $_selectedOption'),
],
),
),
);
}
}
2. 复选框按钮组 (CheckboxGroup)
复选框按钮组允许用户从一组选项中选择多个选项。
import 'package:flutter/material.dart';
import 'package:grouped_buttons_ns/grouped_buttons_ns.dart';
class MyCheckboxGroup extends StatefulWidget {
@override
_MyCheckboxGroupState createState() => _MyCheckboxGroupState();
}
class _MyCheckboxGroupState extends State<MyCheckboxGroup> {
List<String> _selectedOptions = [];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Checkbox Group'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
CheckboxGroup(
labels: <String>[
'Option 1',
'Option 2',
'Option 3',
],
onSelected: (List<String> selected) {
setState(() {
_selectedOptions = selected;
});
},
selected: _selectedOptions,
),
SizedBox(height: 20),
Text('Selected Options: $_selectedOptions'),
],
),
),
);
}
}
参数说明
labels: 按钮的标签列表。onSelected: 当用户选择或取消选择某个选项时的回调函数。selected: 当前选中的选项（单选按钮组为单个字符串，复选框按钮组为字符串列表）。itemBuilder: 自定义每个按钮的构建方式。orientation: 按钮的排列方向，可以是Axis.horizontal或Axis.vertical。margin: 按钮之间的间距。padding: 按钮的内边距。activeColor: 选中状态下的颜色。disabledColor: 禁用状态下的颜色。
自定义样式
你可以通过 itemBuilder 参数来自定义每个按钮的样式：
RadioButtonGroup(
labels: <String>[
'Option 1',
'Option 2',
'Option 3',
],
onSelected: (String selected) {
setState(() {
_selectedOption = selected;
});
},
selected: _selectedOption,
itemBuilder: (Radio radioButton, Text text, int index) {
return Row(
children: <Widget>[
radioButton,
text,
],
);
},
),