效果展示:
选择器组件代码:
import 'package:flutter/cupertino.dart';
class TimePicker extends StatelessWidget {
final DateTime time;
/// tap 事件
final Function(DateTime) onDateTimeChanged;
const TimePicker(
{super.key, required this.time, required this.onDateTimeChanged});
@override
Widget build(BuildContext context) {
return Container(
child: _BottomPicker(
child: CupertinoDatePicker(
backgroundColor:
CupertinoColors.systemBackground.resolveFrom(context),
mode: CupertinoDatePickerMode.time,
initialDateTime: time,
onDateTimeChanged: onDateTimeChanged),
));
}
}
class _BottomPicker extends StatelessWidget {
const _BottomPicker({required this.child});
final Widget child;
@override
Widget build(BuildContext context) {
return Container(
height: 216,
padding: const EdgeInsets.only(top: 6),
margin: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.top,
),
color: CupertinoColors.systemBackground.resolveFrom(context),
child: DefaultTextStyle(
style: TextStyle(
color: CupertinoColors.label.resolveFrom(context),
fontSize: 22,
),
child: GestureDetector(
// Blocks taps from propagating to the modal sheet and popping.
onTap: () {},
child: SafeArea(
top: false,
child: child,
),
),
),
);
}
}
页面使用: