Flutter CupertinoTimerPicker


简介

CupertinoTimerPicker 是一个ios风格下的时间选择组件

此选择器显示带有小时、分钟和秒的时间选择器。时间范围为0-23小时, 0-59分钟. 0-59秒.

基本用法

属性说明:

  • initialTimerDuration 初始化时间点
  • minuteInterval 分钟间隔, 我们设置为5, 则分钟选项为0,5,10,15...
  • mode 显示的格式, 我们可以控制该属性, 仅显示小时与分钟, 分钟与秒等, 具体查看 CupertinoTimerPickerMode
  • onTimerDurationChanged 时间改变后的回调
  • secondInterval 秒数间隔, 与minuteInterval同

实例演示

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

class CupertinoTimerPickerDemo extends StatefulWidget {
  _Demo createState() => _Demo();
}

class _Demo extends State<CupertinoTimerPickerDemo> {
  int index = 0;
  Duration timer =  Duration(minutes: 50);

  Widget _buildBottomPicker(Widget picker) {
    return Container(
      height: 300,
      padding: const EdgeInsets.only(top: 6.0),
      color: CupertinoColors.white,
      child: DefaultTextStyle(
        style: const TextStyle(
          color: CupertinoColors.black,
          fontSize: 22.0,
        ),
        child: GestureDetector(
          // Blocks taps from propagating to the modal sheet and popping.
          onTap: () {},
          child: SafeArea(
            top: false,
            child: picker,
          ),
        ),
      ),
    );
  }
  Widget build(BuildContext context) {
    return  GestureDetector(
        onTap: () {
          showCupertinoModalPopup<void>(
            context: context,
            builder: (BuildContext context) {
              return _buildBottomPicker(CupertinoTimerPicker(
                initialTimerDuration: timer,
                minuteInterval: 5,
                  onTimerDurationChanged: (Duration newTimer) {
                  setState(() => timer = newTimer);
                },
              ));
            },
          );
        },
        child: Text("点我弹出"),
    );
  }
}