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

在Flutter开发中，scrolling_time_picker 是一个非常方便的时间选择器插件。它通过滚动的方式让用户选择时间，界面直观且易于操作。本文将详细介绍如何在Flutter项目中使用 scrolling_time_picker 插件，并提供完整的示例代码。

使用步骤

1. 添加依赖

首先，在项目的 pubspec.yaml 文件中添加 scrolling_time_picker 依赖：

dependencies:
  scrolling_time_picker: ^0.3.0

然后运行以下命令以更新依赖：

flutter pub get

2. 导入库

在需要使用的 Dart 文件中导入 scrolling_time_picker 库：

import 'package:scrolling_time_picker/scrolling_time_picker.dart';

3. 创建时间选择器

接下来，我们创建一个简单的示例来演示如何使用 scrolling_time_picker 插件。以下是一个完整的代码示例：

import 'package:flutter/material.dart';
import 'package:scrolling_time_picker/scrolling_time_picker.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TimePickerExample(),
    );
  }
}

class TimePickerExample extends StatefulWidget {
  [@override](/user/override)
  _TimePickerExampleState createState() => _TimePickerExampleState();
}

class _TimePickerExampleState extends State<TimePickerExample> {
  TimeOfDay? selectedTime;

  Future<void> _showTimePicker() async {
    final TimeOfDay? pickedTime = await showScrollingPicker(
      context: context,
      initialTime: selectedTime ?? TimeOfDay.now(), // 初始时间为当前时间
      title: Text('选择时间'), // 设置标题
      confirmLabel: '确定', // 确定按钮文本
      cancelLabel: '取消', // 取消按钮文本
    );

    if (pickedTime != null) {
      setState(() {
        selectedTime = pickedTime;
      });
    }
  }

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

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

nodeper 1楼•7 天前

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

scrolling_time_picker 是一个用于 Flutter 的时间选择器插件，它允许用户通过滚动选择小时和分钟。这个插件提供了一个平滑的滚动体验，用户可以通过滚动来选择时间。

安装

首先，你需要在 pubspec.yaml 文件中添加 scrolling_time_picker 依赖：

dependencies:
  flutter:
    sdk: flutter
  scrolling_time_picker: ^1.0.0

然后运行 flutter pub get 来安装依赖。

基本使用

下面是一个简单的例子，展示如何使用 scrolling_time_picker 来选择时间：

import 'package:flutter/material.dart';
import 'package:scrolling_time_picker/scrolling_time_picker.dart';
import 'package:scrolling_time_picker/time.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Scrolling Time Picker Example'),
        ),
        body: Center(
          child: TimePickerExample(),
        ),
      ),
    );
  }
}

class TimePickerExample extends StatefulWidget {
  @override
  _TimePickerExampleState createState() => _TimePickerExampleState();
}

class _TimePickerExampleState extends State<TimePickerExample> {
  TimeOfDay _selectedTime = TimeOfDay.now();

  void _onTimeChanged(TimeOfDay newTime) {
    setState(() {
      _selectedTime = newTime;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          'Selected Time: ${_selectedTime.format(context)}',
          style: TextStyle(fontSize: 20),
        ),
        SizedBox(height: 20),
        ScrollingTimePicker(
          selectedTime: _selectedTime,
          onTimeChanged: _onTimeChanged,
        ),
      ],
    );
  }
}

参数说明

selectedTime: 当前选中的时间，类型为 TimeOfDay。
onTimeChanged: 当用户选择新时间时调用的回调函数，返回新的 TimeOfDay。
timeInterval: 时间间隔，默认为 1 分钟。
minuteInterval: 分钟间隔，默认为 1 分钟。
hourInterval: 小时间隔，默认为 1 小时。
hourTextStyle: 小时文本的样式。
minuteTextStyle: 分钟文本的样式。
selectedTextStyle: 选中时间的文本样式。
unselectedTextStyle: 未选中时间的文本样式。
itemExtent: 每个项目的高度。
diameterRatio: 滚轮的直径比。
magnification: 放大倍数。
useMagnifier: 是否使用放大镜效果。

自定义样式

你可以通过传递不同的 TextStyle 来自定义时间的显示样式：

ScrollingTimePicker(
  selectedTime: _selectedTime,
  onTimeChanged: _onTimeChanged,
  hourTextStyle: TextStyle(fontSize: 18, color: Colors.blue),
  minuteTextStyle: TextStyle(fontSize: 18, color: Colors.green),
  selectedTextStyle: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
  unselectedTextStyle: TextStyle(fontSize: 18, color: Colors.grey),
);