首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

flutter OK按钮导航中的Timepicker

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

步骤 1: 创建一个 Flutter 项目

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

代码语言:javascript
复制
flutter create time_picker_example
cd time_picker_example

步骤 2: 更新 pubspec.yaml

确保在 pubspec.yaml 文件中添加 flutter 依赖项(通常已经存在于新项目中):

代码语言:javascript
复制
dependencies:
  flutter:
    sdk: flutter

步骤 3: 创建主界面

lib/main.dart 文件中,创建一个主界面,其中包含一个按钮,用于显示时间选择器。

代码语言:javascript
复制
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),
        ),
      ),
    );
  }
}

代码解释

  1. 主应用程序
    • MyApp 是主应用程序,设置了应用程序的标题和主题,并将 MyHomePage 作为主页。
  2. 主页状态
    • _MyHomePageStateMyHomePage 的状态类,包含一个 _selectedTime 变量来存储用户选择的时间。
    • _selectTime 方法使用 showTimePicker 显示时间选择器,并在用户选择时间后更新 _selectedTime 变量,并导航到 TimeDisplayPage 页面。
  3. 时间显示页面
    • TimeDisplayPage 是一个简单的页面,用于显示用户选择的时间。

运行应用程序

运行应用程序后,你会看到一个按钮 "Select Time"。点击按钮会显示时间选择器,选择时间并点击 "OK" 后,会导航到一个新页面,显示所选时间。

代码语言:javascript
复制
flutter run

通过这种方式,你可以在 Flutter 中使用时间选择器,并在用户点击 "OK" 按钮后进行导航。根据需要,你可以进一步自定义时间选择器和导航逻辑。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券