Flutter复选框列表插件checkbox_list的使用
Flutter复选框列表插件checkbox_list的使用
标题
Flutter复选框列表插件checkbox_list的使用
内容
要使用此插件，请在 pubspec.yaml 文件中添加 checkbox_list 作为依赖项。
此库目前有一个 Widget。 CustomCheckBox
使用
import 'package:custom_checkbox/custom_checkbox.dart';
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom checkbox Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const CheckBoxDemo(),
);
}
}
class CheckBoxDemo extends StatelessWidget {
const CheckBoxDemo({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: [
// 单选标记框
CustomCheckBox(
checkBoxWidth: 20,
checkBoxHeight: 20,
borderColor: Colors.orange,
onChanged: (value) {
print(value);
},
multipleChoise: false,
textLabel: "Value 1",
labelTextStyle:
TextStyle(color: Colors.black, fontSize: 16),
paddingBetweenTitleAndCheckBox: 13,
),
// 单选标记框
CustomCheckBox(
checkBoxWidth: 20,
checkBoxHeight: 20,
borderColor: Colors.blue,
onChanged: (value) {
print(value);
},
clickableLabelSplashColor: Colors.blue, // 需要设置可点击标签为 true 才能使用此属性
clickableLabel: true,
multipleChoise: false,
textLabel: "Value 2",
labelTextStyle:
TextStyle(color: Colors.black, fontSize: 16),
paddingBetweenTitleAndCheckBox: 13,
),
// 单选标记框
CustomCheckBox(
checkBoxWidth: 20,
checkBoxHeight: 20,
borderColor: Colors.orange,
onChanged: (value) {
print(value);
},
multipleChoise: false,
textLabel: "Value 3",
labelTextStyle:
TextStyle(color: Colors.black, fontSize: 16),
paddingBetweenTitleAndCheckBox: 13,
checkBoxSplashColor: Colors.blue,
checkBoxSplashRadius: 20,
),
// 多选标记框带列表
CustomCheckBox(
checkBoxWidth: 20,
checkBoxHeight: 20,
borderColor: Colors.orange,
onChanged: (value) {
print(value);
},
multipleChoise: false,
checkboxList: [
"1",
"2",
"3",
"4"
], // 设置一个字符串列表来生成带有标签的多选标记框
labelTextStyle:
TextStyle(color: Colors.black, fontSize: 16),
paddingBetweenTitleAndCheckBox: 13,
),
// 多选标记框带列表
CustomCheckBox(
checkBoxWidth: 20,
checkBoxHeight: 20,
borderColor: Colors.orange,
onChanged: (value) {
print(value);
},
multipleChoise: true,
clickableLabel: true, // 点击整个容器
checkboxList: [
"1",
"2",
"3",
"4"
], // 设置一个字符串列表来生成带有标签的多选标记框
labelTextStyle:
TextStyle(color: Colors.black, fontSize: 16),
paddingBetweenTitleAndCheckBox: 13,
),
// 单选标记框带列表
CustomCheckBox(
checkBoxWidth: 20,
checkBoxHeight: 20,
borderColor: Colors.green,
onChanged: (value) {
print(value);
},
shape: BoxShape.circle,
checkBoxSplashRadius: 15,
checkBoxSplashColor: Colors.yellow,
multipleChoise: false,
checkboxList: [
"1",
"2",
"3",
"4"
], // 设置一个字符串列表来生成带有标签的单选标记框
labelTextStyle:
TextStyle(color: Colors.black, fontSize: 16),
paddingBetweenTitleAndCheckBox: 13,
selectedBoxColor: Colors.red,
),
],
),
),
);
}
}
示例代码
import 'package:checkbox_list/checkbox_list.dart';
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom checkbox Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const CheckBoxDemo(),
);
}
}
class CheckBoxDemo extends StatelessWidget {
const CheckBoxDemo({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: [
// 单选标记框
CustomCheckBox(
checkBoxWidth: 20,
checkBoxHeight: 20,
borderColor: Colors.orange,
onChanged: (value) {
print(value);
},
multipleChoise: false,
textLabel: "Value 1",
labelTextStyle:
TextStyle(color: Colors.black, fontSize: 16),
paddingBetweenTitleAndCheckBox: 13,
),
// 单选标记框
CustomCheckBox(
checkBoxWidth: 20,
checkBoxHeight: 20,
borderColor: Colors.blue,
onChanged: (value) {
print(value);
},
clickableLabelSplashColor: Colors.blue, // 需要设置 clickable label to true 才能使用此属性
clickableLabel: true,
multipleChoise: false,
textLabel: "Value 2",
labelTextStyle:
TextStyle(color: Colors.black, fontSize: 16),
paddingBetweenTitleAndCheckBox: 13,
),
// 单选标记框
CustomCheckBox(
checkBoxWidth: 20,
checkBoxHeight: 20,
borderColor: Colors.orange,
onChanged: (value) {
print(value);
},
multipleChoise: false,
textLabel: "Value 3",
labelTextStyle:
TextStyle(color: Colors.black, fontSize: 16),
paddingBetweenTitleAndCheckBox: 13,
checkBoxSplashColor: Colors.blue,
checkBoxSplashRadius: 20,
),
// 多选标记框带列表
CustomCheckBox(
checkBoxWidth: 20,
checkBoxHeight: 20,
borderColor: Colors.orange,
onChanged: (value) {
print(value);
},
multipleChoise: false,
checkboxList: [
"1",
"2",
"3",
"4"
], // 设置一个字符串列表来生成带有标签的多选标记框
labelTextStyle:
TextStyle(color: Colors.black, fontSize: 16),
paddingBetweenTitleAndCheckBox: 13,
),
// 多选标记框带列表
CustomCheckBox(
checkBoxWidth: 20,
checkBoxHeight: 20,
borderColor: Colors.orange,
onChanged: (value) {
print(value);
},
multipleChoise: true,
clickableLabel: true, // 点击整个容器
checkboxList: [
"1",
"2",
"3",
"4"
], // 设置一个字符串列表来生成带有标签的多选标记框
labelTextStyle:
TextStyle(color: Colors.black, fontSize: 16),
paddingBetweenTitleAndCheckBox: 13,
),
// 单选标记框带列表
CustomCheckBox(
checkBoxWidth: 20,
checkBoxHeight: 20,
borderColor: Colors.green,
onChanged: (value) {
print(value);
},
shape: BoxShape.circle,
checkBoxSplashRadius: 15,
checkBoxSplashColor: Colors.yellow,
multipleChoise: false,
checkboxList: [
"1",
"2",
"3",
"4"
], // 设置一个字符串列表来生成带有标签的单选标记框
labelTextStyle:
TextStyle(color: Colors.black, fontSize: 16),
paddingBetweenTitleAndCheckBox: 13,
selectedBoxColor: Colors.red,
),
],
),
),
);
}
}
更多关于Flutter复选框列表插件checkbox_list的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter复选框列表插件checkbox_list的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何在Flutter中使用checkbox_list插件来创建复选框列表的示例代码。这个插件可以帮助你快速生成和管理一个复选框列表。需要注意的是，由于checkbox_list可能不是Flutter官方插件库中的一部分，这里假设它是一个第三方包，并且已经发布在pub.dev上。如果实际插件名称或用法有所不同，请参考相应插件的官方文档。
首先，确保你已经在pubspec.yaml文件中添加了checkbox_list插件的依赖：
dependencies:
flutter:
sdk: flutter
checkbox_list: ^最新版本号 # 替换为实际版本号
然后，运行flutter pub get来安装依赖。
接下来，在你的Dart文件中，你可以按照以下方式使用checkbox_list插件来创建一个复选框列表：
import 'package:flutter/material.dart';
import 'package:checkbox_list/checkbox_list.dart'; // 假设包名正确
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Checkbox List Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: CheckboxListDemo(),
);
}
}
class CheckboxListDemo extends StatefulWidget {
@override
_CheckboxListDemoState createState() => _CheckboxListDemoState();
}
class _CheckboxListDemoState extends State<CheckboxListDemo> {
final List<String> items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
List<bool> selectedItems = List<bool>.filled(items.length, false);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Checkbox List Demo'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: CheckboxList<String>(
items: items,
initialValues: Map.fromIterable(items, key: (e) => e, value: (e) => false),
onChanged: (Map<String, bool> value) {
setState(() {
selectedItems = items.map((item) => value[item] ?? false).toList();
});
},
valueTransformer: (item, value) => item,
itemBuilder: (context, item, value) {
return CheckboxListTile(
title: Text(item),
value: value,
onChanged: (newValue) {
// 这里不需要手动更新状态，因为onChanged回调已经处理了
},
);
},
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// 打印选中的项
print('Selected items: ${selectedItems.asMap().entries.where((e) => e.value).map((e) => e.key).toList()}');
},
tooltip: 'Show selected items',
child: Icon(Icons.print),
),
);
}
}
在这个示例中：
- 我们创建了一个包含复选框项的列表
items。 - 使用
CheckboxList小部件来生成复选框列表。 initialValues参数用于设置复选框的初始选中状态（这里全部设置为未选中）。onChanged回调用于处理复选框状态的变化，并更新selectedItems列表。itemBuilder参数用于自定义每个复选框项的外观，这里使用了CheckboxListTile。- 在浮动操作按钮的点击事件中，我们打印出当前选中的项。
请注意，上述代码假设checkbox_list插件提供了一个名为CheckboxList的小部件，并且其API与上述示例相匹配。如果实际插件的API有所不同，请参考相应插件的官方文档进行调整。
