Flutter自定义选择器插件custom_picker的使用
Flutter 自定义选择器插件 custom_picker 的使用
custom_picker 是一个 Flutter 包，它为您提供了一个美化版的下拉框小部件。在大小、颜色、样式等方面具有高度可定制性。
导入
在 pubspec.yaml 文件中添加以下依赖：
dependencies:
custom_picker: <latest_version>
输出
使用
您可以使用多种文本美化选项与检测到的文本格式一起使用。
CustomPicker(
// 决定是否循环显示弹出项
optionLoop: [false, false],
// 设置弹出窗口的高度
popupHeight: 200,
// 弹出菜单的位置
below: false,
// 垂直偏移量
verticalOffset: 10,
// 处理所有更改
handleChange: (list) {
print(list);
},
// 是否包括确认/取消对话框
yesNo: true,
// 设置选中项目的颜色
popUpSelColor: Colors.black.withAlpha(150),
// 定制每个弹出列表项的文本样式
popUpTextStyle: const [
TextStyle(color: Colors.white, fontSize: 20),
TextStyle(color: Colors.white, fontSize: 20),
],
// 定制每个列表项的文本样式
widTextStyle: const [
TextStyle(color: Colors.black, fontSize: 18),
TextStyle(color: Colors.black, fontSize: 18),
],
// 定制分割线的颜色
divColor: Colors.black,
// 给弹出菜单添加装饰
popUpDecoration: BoxDecoration(
color: Colors.black.withAlpha(100),
borderRadius: BorderRadius.circular(10)),
// 装饰您的选择器小部件
widDecoration: BoxDecoration(
border: Border.all(width: 2, color: Colors.black),
borderRadius: BorderRadius.circular(10),
),
// 输入您想要在弹出菜单中显示的所有列表项
list: const [
['1', '2', '3', '4', '5', '6'],
['one', 'two', 'three']
],
// 控制可见小部件子项的 flex 属性
wtList: [3, 1],
// 当选择 Yes/No 对话框中的选项时调用的回调函数
onChanged: (List<int> value) {
print(value);
},
// 设置初始选中的项目索引
selected: const [0, 1],
)
参数
以下是 CustomPicker 的参数说明：
| 参数名称 | 描述 | 默认值 |
|---|---|---|
| popupHeight | 弹出窗口的高度 | 400 |
| optionLoop | 列表是否循环 | 所有为 true |
| below | 是否在小部件下方显示弹出窗口 | false |
| popUpDecoration | 弹出窗口的装饰 | radius: 10, border: Color(0xFF424242) |
| verticalOffset | 弹出窗口的垂直位置 | TextAlign.start |
| selected | 初始选中的列表 | required |
| yesNo | 是否显示确认/取消对话框 | false |
| popUpTextStyle | 添加弹出窗口项的文本样式 | TextStyle(fontSize: 17) |
| widTextStyle | 添加选择器项的文本样式 | TextStyle() |
| onChanged | 每当当前日期发生变化时调用 | required |
| handleChange | 当任何子项发生变化时调用此方法 | void |
| popUpMargin | 弹出窗口的边距（如果为零，则弹出窗口将位于选择器中心） | hor = 20, ver = 20 |
| onCancel | 用户取消更改日期时调用 | void |
| list | 要在弹出窗口中显示的选项列表 | required |
| wtList | 可见小部件项的 flex 属性 | 每个子项相等 |
| contentPadding | 选择器小部件的填充 | 零 |
| widDecoration | 可见小部件的装饰 | BoxDecoration() |
| childDecoration | 可见小部件子项的装饰 | 默认文本样式 |
| widHeight | 可见小部件的高度 | 40 |
| divColor | 可见小部件的分隔线颜色 | Color(0xFF424242) |
| popUpSelColor | 弹出窗口选中项的颜色 | Colors.white |
示例代码
import 'package:custom_picker/custom_picker.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
[@override](/user/override)
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
var opt = [5, 17, 41];
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
CustomPicker(
// 决定是否循环显示弹出项
optionLoop: [false, false, false],
// 设置弹出窗口的高度
popupHeight: 500,
// 弹出菜单的位置
below: false,
// 垂直偏移量
verticalOffset: 10,
// 处理所有更改
handleChange: (list) {
print(list);
},
// 是否包括确认/取消对话框
yesNo: true,
// 设置选中项目的颜色
popUpSelColor: Colors.black.withAlpha(50),
// 定制每个弹出列表项的文本样式
popUpTextStyle: [
TextStyle(color: Colors.grey.shade600, fontSize: 18),
TextStyle(color: Colors.grey.shade600, fontSize: 18),
TextStyle(color: Colors.grey.shade600, fontSize: 18),
],
// 定制每个列表项的文本样式
widTextStyle: [
TextStyle(color: Colors.black.withAlpha(120), fontSize: 18),
TextStyle(color: Colors.black.withAlpha(120), fontSize: 18),
TextStyle(color: Colors.black.withAlpha(120), fontSize: 18),
],
// 定制分割线的颜色
divColor: Colors.grey.shade200,
// 添加填充
contentPadding: const EdgeInsets.all(7),
// 给弹出菜单添加装饰
popUpDecoration: BoxDecoration(
color: Colors.white,
border: Border.all(width: 2, color: Colors.white),
boxShadow: [
BoxShadow(
color: const Color(0x33000000).withAlpha(50),
offset: Offset(2, 4),
blurRadius: 7,
),
],
borderRadius: BorderRadius.circular(10)),
// 装饰您的选择器小部件
widDecoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: const Color(0x33000000).withAlpha(50),
offset: Offset(2, 4),
blurRadius: 7,
),
],
borderRadius: BorderRadius.circular(20),
),
// 输入您想要在弹出菜单中显示的所有列表项
list: [
[
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
List.generate(31, (index) => '${index + 1}').toList(),
List.generate(50, (index) => '${index + 1980}').toList(),
],
// 控制可见小部件子项的 flex 属性
wtList: [3, 1, 2],
// 当选择 Yes/No 对话框中的选项时调用的回调函数
onChanged: (List<int> value) {
opt = value;
setState(() {});
},
// 设置初始选中的项目索引
selected: opt,
),
SizedBox(height: 100),
],
),
),
);
}
}
更多关于Flutter自定义选择器插件custom_picker的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter自定义选择器插件custom_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何在Flutter中使用custom_picker插件的示例代码。这个插件允许你创建自定义的选择器，比如日期选择器、时间选择器或自定义的选项选择器。
首先，确保你已经在pubspec.yaml文件中添加了custom_picker依赖：
dependencies:
flutter:
sdk: flutter
custom_picker: ^x.y.z # 替换为最新的版本号
然后，运行flutter pub get来安装依赖。
接下来，这里有一个简单的示例，展示如何使用custom_picker来创建一个基本的日期选择器：
import 'package:flutter/material.dart';
import 'package:custom_picker/custom_picker.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Custom Picker Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
DateTime selectedDate;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Custom Picker Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
selectedDate == null
? 'No date selected'
: 'Selected Date: ${selectedDate.toLocal()}',
style: TextStyle(fontSize: 20),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
_showDatePicker(context);
},
child: Text('Select Date'),
),
],
),
),
);
}
Future<void> _showDatePicker(BuildContext context) async {
final DateTime picked = await showDatePicker(
context: context,
initialDate: selectedDate ?? DateTime.now(),
firstDate: DateTime(2000),
lastDate: DateTime(2101),
builder: (BuildContext context, Widget? child) {
return Theme(
data: ThemeData.light().copyWith(
colorScheme: ColorScheme.fromSwatch(
primarySwatch: Colors.blue,
).copyWith(
background: Colors.white,
),
dialogBackgroundColor: Colors.white,
),
child: child!,
);
},
);
if (picked != null && picked != selectedDate) {
setState(() {
selectedDate = picked;
});
}
}
// 这是一个自定义选择器的示例，假设我们有一个简单的字符串列表选择器
Future<void> _showCustomPicker(BuildContext context) async {
final List<String> options = ['Option 1', 'Option 2', 'Option 3'];
final String? result = await showDialog<String>(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Select an Option'),
content: SingleChildScrollView(
child: ListBody(
children: ListTile.divideTiles(
context: context,
tiles: options.map<Widget>((String option) {
return ListTile(
title: Text(option),
onTap: () {
Navigator.of(context).pop(option);
},
);
}).toList(),
),
),
),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Cancel'),
),
TextButton(
onPressed: () {
// 通常这里不会直接pop，因为用户还没选择，但为了示例简化处理
Navigator.of(context).pop('Default Selected'); // 示例中不会用到这行
},
child: Text('OK'),
),
],
);
},
);
// 注意：这个简单的自定义选择器示例并没有实际返回用户选择的值，
// 你需要根据你的需求调整这部分代码以正确处理用户的选择。
// 在实际应用中，你可能需要使用 StatefulBuilder 或其他方法来更新 UI。
// 下面的代码仅作为示例，实际上并不会更新任何状态。
if (result != null) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("You selected: $result")),
);
}
}
}
注意：上面的_showCustomPicker函数提供了一个非常基础的自定义选择器对话框示例，但它并没有实际返回用户选择的值（因为示例代码简化了处理）。在实际应用中，你需要使用如StatefulBuilder等方法来处理用户的选择并更新UI状态。
对于custom_picker插件提供的更高级和定制化的选择器功能，请参考其官方文档和示例代码，以了解如何根据你的需求进行配置和使用。
