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

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

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

time_picker_spinner 是一个替代默认 Material 时间选择器的插件,它使用了滚动选择器的形式。该插件支持12小时和24小时格式,并允许自定义间隔模式,同时支持阿拉伯语和英语的本地化。

安装

1. 在 pubspec.yaml 文件中添加依赖

dependencies:
  time_picker_spinner: any

2. 获取包

你可以通过 IDE 的 GUI 或命令行获取包:

$ flutter pub get

3. 导入 time_picker_spinner.dart 文件

import 'package:time_picker_spinner/time_picker_spinner.dart';

特性

  • 支持12小时制和24小时制。
  • 支持阿拉伯语和英语的本地化。

使用方法

英文示例

TimePickerSpinner(
  locale: const Locale('en', ''),
  time: dateTime,
  is24HourMode: false,
  isShowSeconds: true,
  itemHeight: 80,
  normalTextStyle: const TextStyle(
    fontSize: 24,
  ),
  highlightedTextStyle: const TextStyle(fontSize: 24, color: Colors.blue),
  isForce2Digits: true,
  onTimeChange: (time) {
    setState(() {
      dateTime = time;
    });
  },
)

阿拉伯文示例

TimePickerSpinner(
  locale: const Locale('ar', ''),
  time: dateTime,
  is24HourMode: false,
  isShowSeconds: true,
  itemHeight: 80,
  normalTextStyle: const TextStyle(
    fontSize: 24,
  ),
  highlightedTextStyle: const TextStyle(fontSize: 24, color: Colors.blue),
  isForce2Digits: true,
  onTimeChange: (time) {
    setState(() {
      dateTime = time;
    });
  },
)

属性说明

属性 类型 默认值
time DateTime 当前时间 [DateTime.now()]
minutesInterval int 1
secondsInterval int 1
is24HourMode bool true
isShowSeconds bool false
highlightedTextStyle TextStyle -
normalTextStyle TextStyle -
itemHeight double 60.0
itemWidth double 45.0
spacing double 20.0
alignment AlignmentGeometry Alignment.centerRight
isForce2Digits bool false
onTimeChange TimePickerCallback -
locale Locale en

示例代码

以下是一个完整的示例程序,展示如何在应用中使用 time_picker_spinner 插件。

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
      locale: const Locale('ar'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime dateTime = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("time_picker_spinner"),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '${dateTime.hour} : ${dateTime.minute}',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            const Divider(),
            TimePickerSpinner(
              locale: const Locale('ar', ''),
              time: dateTime,
              is24HourMode: false,
              isShowSeconds: false,
              itemHeight: 80,
              hapticFeedback: true,
              normalTextStyle: const TextStyle(
                fontSize: 24,
              ),
              highlightedTextStyle: const TextStyle(fontSize: 24, color: Colors.blue),
              isForce2Digits: true,
              onTimeChange: (time) {
                setState(() {
                  dateTime = time;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

通过以上步骤,你可以在你的 Flutter 应用中集成并使用 time_picker_spinner 插件来实现时间选择功能。


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

1 回复

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


当然,以下是如何在Flutter应用中使用time_picker_spinner插件的一个示例代码案例。这个插件允许你以旋转选择器(spinner)的形式选择时间。

首先,确保你已经在pubspec.yaml文件中添加了time_picker_spinner依赖:

dependencies:
  flutter:
    sdk: flutter
  time_picker_spinner: ^2.0.0  # 请检查最新版本号

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

接下来,在你的Dart文件中使用TimePickerSpinner组件。以下是一个完整的示例,展示如何在一个简单的Flutter应用中集成和使用TimePickerSpinner

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Time Picker Spinner Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  TimeOfDay _selectedTime = TimeOfDay.now();

  void _showTimePicker() async {
    final TimeOfDay? picked = await showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Select Time'),
          content: SingleChildScrollView(
            child: TimePickerSpinner(
              initialTime: _selectedTime,
              onChanged: (TimeOfDay value) {
                setState(() {
                  _selectedTime = value;
                });
              },
            ),
          ),
          actions: <Widget>[
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: Text('Cancel'),
            ),
            TextButton(
              onPressed: () {
                setState(() {
                  _selectedTime = TimeOfDay(
                    hour: picked!.hour,
                    minute: picked.minute,
                  );
                });
                Navigator.of(context).pop();
              },
              child: Text('OK'),
            ),
          ],
        );
      },
    );

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Time Picker Spinner Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Time: ${_selectedTime.format(context)}',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _showTimePicker,
              child: Text('Select Time'),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释:

  1. 依赖添加:在pubspec.yaml文件中添加time_picker_spinner依赖。
  2. 导入包:在Dart文件中导入time_picker_spinner包。
  3. UI结构
    • 使用MaterialAppScaffold来构建基本的Flutter应用结构。
    • 使用TimePickerSpinner组件在对话框中显示时间选择器。
  4. 状态管理
    • _selectedTime变量用于存储选中的时间。
    • _showTimePicker方法用于显示时间选择器对话框,并在用户选择时间后更新状态。

这个示例展示了如何使用time_picker_spinner插件来创建一个简单的时间选择器对话框,并处理用户的选择。你可以根据需要对这个示例进行扩展和修改。

回到顶部