Flutter 3 必学: 灵活运用时间对话框

2023-03-26 16:40:29

Flutter 3 时间对话框：轻松选择和显示时间

在 Flutter 3 中，时间对话框是一个功能强大的工具，可用于从用户处获取特定时间信息。该对话框提供了一个直观的界面，包含以下选项：

滚动选择器： 用于选择小时和分钟。
确定按钮： 用于确认所选时间。
取消按钮： 用于关闭对话框。

要显示时间对话框，请使用 showTimePicker() 方法。它需要两个参数：context（指定对话框的位置）和 initialTime（对话框中最初显示的时间）。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: RaisedButton(
            onPressed: () async {
              TimeOfDay time = await showTimePicker(
                context: context,
                initialTime: TimeOfDay.now(),
              );
              if (time != null) {
                print('时间：${time.hour}:${time.minute}');
              }
            },
            child: Text('选择时间'),
          ),
        ),
      ),
    );
  }
}

获取当前时间

Flutter 3 还提供了几种方法来获取当前时间：

DateTime.now()： 返回当前的日期和时间。
TimeOfDay.now()： 返回当前的时间（不包括日期）。

例如，以下代码将打印当前时间：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(
            '当前时间：${TimeOfDay.now()}',
            style: TextStyle(fontSize: 20),
          ),
        ),
      ),
    );
  }
}