flutter OK按钮导航中的Timepicker

在 Flutter 中，你可以使用 showTimePicker 函数来显示一个时间选择器，并在用户选择时间后通过点击 "OK" 按钮进行导航。以下是一个详细的示例，展示如何实现这一功能。

步骤 1: 创建一个 Flutter 项目

如果你还没有创建 Flutter 项目，可以使用以下命令创建一个新的 Flutter 项目：

flutter create time_picker_example
cd time_picker_example

步骤 2: 更新 `pubspec.yaml`

确保在 pubspec.yaml 文件中添加 flutter 依赖项（通常已经存在于新项目中）：

dependencies:
  flutter:
    sdk: flutter

步骤 3: 创建主界面

在 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" 按钮后进行导航。根据需要，你可以进一步自定义时间选择器和导航逻辑。

flutter OK按钮导航中的Timepicker

步骤 1: 创建一个 Flutter 项目

步骤 2: 更新 pubspec.yaml

步骤 3: 创建主界面

代码解释

运行应用程序

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

步骤 2: 更新 `pubspec.yaml`