在 Flutter 中,你可以使用 showTimePicker
函数来显示一个时间选择器,并在用户选择时间后通过点击 "OK" 按钮进行导航。以下是一个详细的示例,展示如何实现这一功能。
如果你还没有创建 Flutter 项目,可以使用以下命令创建一个新的 Flutter 项目:
flutter create time_picker_example
cd time_picker_example
pubspec.yaml
确保在 pubspec.yaml
文件中添加 flutter
依赖项(通常已经存在于新项目中):
dependencies:
flutter:
sdk: flutter
在 lib/main.dart
文件中,创建一个主界面,其中包含一个按钮,用于显示时间选择器。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Time Picker Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
TimeOfDay _selectedTime;
Future<void> _selectTime(BuildContext context) async {
final TimeOfDay picked = await showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
);
if (picked != null && picked != _selectedTime) {
setState(() {
_selectedTime = picked;
});
// 导航到新页面
Navigator.push(
context,
MaterialPageRoute(builder: (context) => TimeDisplayPage(time: _selectedTime)),
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Time Picker Example'),
),
body: Center(
child: ElevatedButton(
onPressed: () => _selectTime(context),
child: Text('Select Time'),
),
),
);
}
}
class TimeDisplayPage extends StatelessWidget {
final TimeOfDay time;
TimeDisplayPage({@required this.time});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Selected Time'),
),
body: Center(
child: Text(
'Selected time: ${time.format(context)}',
style: TextStyle(fontSize: 24),
),
),
);
}
}
MyApp
是主应用程序,设置了应用程序的标题和主题,并将 MyHomePage
作为主页。_MyHomePageState
是 MyHomePage
的状态类,包含一个 _selectedTime
变量来存储用户选择的时间。_selectTime
方法使用 showTimePicker
显示时间选择器,并在用户选择时间后更新 _selectedTime
变量,并导航到 TimeDisplayPage
页面。TimeDisplayPage
是一个简单的页面,用于显示用户选择的时间。运行应用程序后,你会看到一个按钮 "Select Time"。点击按钮会显示时间选择器,选择时间并点击 "OK" 后,会导航到一个新页面,显示所选时间。
flutter run
通过这种方式,你可以在 Flutter 中使用时间选择器,并在用户点击 "OK" 按钮后进行导航。根据需要,你可以进一步自定义时间选择器和导航逻辑。
领取专属 10元无门槛券
手把手带您无忧上云