Flutter时间选择器插件time_picker_widget的使用

Flutter时间选择器插件time_picker_widget的使用

time_picker_widget 是一个自定义的时间选择器插件，允许你像在 showDatePicker 中一样设置可选的时间范围。它通过 selectableTimePredicate 参数来实现对时间的选择限制。

下图展示了该插件的演示效果：

以下是使用 time_picker_widget 的示例代码：

import 'package:flutter/material.dart';
import 'package:time_picker_widget/time_picker_widget.dart'; // 引入插件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TimeOfDay? selectedTime; // 用于存储用户选择的时间

  void _showTimePicker() async {
    final TimeOfDay? pickedTime = await showCustomTimePicker(
      context: context, // 当前上下文
      onFailValidation: (context) => // 如果选择的时间不符合条件，触发此回调
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('不可用的选择')),
          ),
      initialTime: TimeOfDay(hour: 2, minute: 0), // 初始时间
      selectableTimePredicate: (time) => // 设置可选时间范围
          time.hour > 1 && time.hour < 14 && time.minute % 10 == 0,
    );

    if (pickedTime != null) {
      setState(() {
        selectedTime = pickedTime; // 更新状态
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('时间选择器示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              selectedTime == null
                  ? '请选择时间'
                  : '已选择时间: ${selectedTime!.format(context)}',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _showTimePicker, // 显示时间选择器
              child: Text('选择时间'),
            ),
          ],
        ),
      ),
    );
  }
}

代码说明：

  1. 导入插件：首先需要引入 time_picker_widget 插件。
    import 'package:time_picker_widget/time_picker_widget.dart';

更多关于Flutter时间选择器插件time_picker_widget的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter时间选择器插件time_picker_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


time_picker_widget 是一个用于 Flutter 的时间选择器插件，它允许用户选择一个时间。以下是如何在 Flutter 项目中使用 time_picker_widget 的基本步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 time_picker_widget 的依赖。

dependencies:
  flutter:
    sdk: flutter
  time_picker_widget: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 以获取依赖。

2. 导入包

在你的 Dart 文件中导入 time_picker_widget 包。

import 'package:time_picker_widget/time_picker_widget.dart';

3. 使用时间选择器

你可以使用 TimePicker.showTimePicker 方法来显示时间选择器，并获取用户选择的时间。

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 TimePicker.showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
    );

    if (picked != null && picked != _selectedTime) {
      setState(() {
        _selectedTime = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Time Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              _selectedTime == null
                  ? 'No time selected!'
                  : 'Selected time: ${_selectedTime!.format(context)}',
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _selectTime(context),
              child: Text('Select Time'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 运行应用

现在你可以运行你的 Flutter 应用，点击按钮后将会弹出一个时间选择器，用户可以选择一个时间，选择的时间将会显示在屏幕上。

5. 自定义选项

TimePicker.showTimePicker 方法还提供了一些可选参数，允许你自定义时间选择器的外观和行为。例如：

  • initialTime: 初始显示的时间。
  • cancelText: 取消按钮的文本。
  • confirmText: 确认按钮的文本。
  • helpText: 帮助文本。
  • hourLabelText: 小时标签文本。
  • minuteLabelText: 分钟标签文本。
final TimeOfDay? picked = await TimePicker.showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  cancelText: 'Cancel',
  confirmText: 'OK',
  helpText: 'Select Time',
  hourLabelText: 'Hour',
  minuteLabelText: 'Minute',
);

6. 处理时间

你可以使用 TimeOfDay 对象来处理用户选择的时间。例如，你可以将其转换为字符串或进行其他操作。

String formattedTime = _selectedTime!.format(context);
回到顶部