BottomSheet结合Picker选择器
发布时间 :
字数:311
阅读 :
import 'package:flutter/material.dart';
import 'package:flutter_picker_plus/flutter_picker_plus.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: BottomSheetPickerDemo(),
);
}
}
class BottomSheetPickerDemo extends StatefulWidget {
const BottomSheetPickerDemo({super.key});
@override
State<BottomSheetPickerDemo> createState() => _BottomSheetPickerDemoState();
}
class _BottomSheetPickerDemoState extends State<BottomSheetPickerDemo> {
String _result = "未选择";
void _showPickerBottomSheet() async {
// 构建 Picker
final picker = Picker(
adapter: PickerDataAdapter<String>(
pickerData: ["苹果", "香蕉", "橙子", "葡萄", "西瓜"],
),
itemExtent: 40,
cancelText: "取消",
confirmText: "确认",
onConfirm: (picker, selected) {
final values = picker.getSelectedValues();
if (values.isNotEmpty) {
setState(() {
_result = values.first;
});
}
},
);
// 用 showModalBottomSheet 包裹 Picker
await showModalBottomSheet(
context: context,
barrierColor: Colors.black54,
backgroundColor: Colors.transparent, // 外层透明,自己加圆角
builder: (context) {
return Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
boxShadow: [BoxShadow(color: Colors.black26, blurRadius: 8)],
),
height: 300,
child: picker.makePicker(),
);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Picker BottomSheet Demo")),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("选择结果:$_result", style: const TextStyle(fontSize: 18)),
const SizedBox(height: 20),
ElevatedButton(
onPressed: _showPickerBottomSheet,
child: const Text("打开 Picker BottomSheet"),
),
],
),
),
);
}
}
- 上面代码中调用
showModalBottomSheet,打开底部弹窗。
Picker 自己其实封装了关闭逻辑
- 确认按钮(
confirmText):点击时会先执行 onConfirm 回调,然后调用 Navigator.of(context).pop() 把 Picker 弹窗关掉。
- 取消按钮(
cancelText):点击时会调用 Navigator.of(context).pop() 直接关闭。