Flutter时间选择插件time_pickerr的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter时间选择插件time_pickerr的使用

time_pickerr 是一个用于 Flutter 的水平选择器插件。它允许用户通过水平滚动来选择时间。

使用

基本用法

你可以在你的应用中像普通小部件一样使用 time_pickerr：

buildCustomTimer(BuildContext context) {
  return CustomHourPicker(
    elevation: 2,
    onPositivePressed: (context, time) {
      // 当用户点击确定按钮时，打印当前选择的时间
      print('onPositive $time');
    },
    onNegativePressed: (context) {
      // 当用户点击取消按钮时，执行的操作
      print('onNegative');
    },
  );
};

在对话框中使用

你也可以在对话框中使用该插件：

showDialog(
  context: context,
  builder: (BuildContext context) {
    return buildCustomTimer(context);
  },
);

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用time_picker插件的一个示例代码案例。请注意，这里假设你已经有一个Flutter项目，并且已经添加了time_picker插件的依赖。

首先，你需要在pubspec.yaml文件中添加flutter_localizations和cupertino_localizations（如果你打算支持iOS风格的日期选择器）的依赖，以及time_picker插件（虽然实际上Flutter内置了时间选择器，这里假设你是指自定义或第三方时间选择器，但原理类似）。不过，由于Flutter官方库已经提供了时间选择器，我们通常使用官方的showTimePicker方法。以下是使用官方时间选择器的示例：

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  cupertino_localizations:
    sdk: flutter

接下来，在你的Dart文件中，你可以使用以下代码来显示时间选择器：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart'; // 如果需要使用Cupertino风格的时间选择器

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Time Picker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        // 其他本地化委托...
      ],
      supportedLocales: [
        Locale('en', 'US'), // 英语（美国）
        Locale('zh', 'CN'), // 中文（简体，中国）
        // 其他支持的区域设置...
      ],
      home: TimePickerDemo(),
    );
  }
}

class TimePickerDemo extends StatefulWidget {
  @override
  _TimePickerDemoState createState() => _TimePickerDemoState();
}

class _TimePickerDemoState extends State<TimePickerDemo> {
  TimeOfDay _selectedTime = TimeOfDay.now();

  void _selectTime(BuildContext context) async {
    final TimeOfDay? picked = await showTimePicker(
      context: context,
      initialTime: _selectedTime,
      parentTheme: Theme.of(context),
    );
    if (picked != null && picked != _selectedTime) {
      setState(() {
        _selectedTime = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('选择时间'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '${_selectedTime.format(context)}',
              style: Theme.of(context).textTheme.headline4,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _selectTime(context),
              child: Text('选择时间'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个时间选择器。用户点击按钮时，会弹出一个时间选择器对话框，用户可以选择时间。选择的时间会显示在按钮上方。

注意：

  • showTimePicker 是 Flutter Material 库中的一个方法，用于显示时间选择器。
  • TimeOfDay 是一个表示一天中的时间的类，它包含小时和分钟。
  • Locale 和本地化委托用于支持不同的语言和区域设置。

如果你确实需要使用第三方的时间选择器插件（虽然通常不必要，因为Flutter官方库已经提供了强大的功能），你需要查找该插件的文档并按照其说明进行集成。但大多数第三方插件的使用方式与官方插件类似，通过调用插件提供的方法来显示选择器并处理用户的选择。

回到顶部