Flutter CupertinoTimerPicker的使用教程和示例

在 Flutter 中，CupertinoTimerPicker小部件用于显示iOS 风格的倒计时器选择器。它显示带有小时、分钟和秒旋转器的倒计时持续时间。持续时间范围为 0 到 23 小时 59 分 59 秒。

在这篇以代码为中心的文章中，我们将研究一个完整的示例，演示如何使用 showCupertinoModalPopup() 函数实现 CupertinoTimerPicker，然后学习该小部件的基础知识。

• CupertinoTimerPicker的构造函数

CupertinoTimerPicker({
  Key? key, 
  CupertinoTimerPickerMode mode = CupertinoTimerPickerMode.hms, 
  Duration initialTimerDuration = Duration.zero, 
  int minuteInterval = 1, 
  int secondInterval = 1, 
  AlignmentGeometry alignment = Alignment.center, 
  Color? backgroundColor, 
  double itemExtent = _kItemExtent, 
  required ValueChanged<Duration> onTimerDurationChanged
})

• key：组件的可选键。

• mode：可选参数，指定计时器选择器的模式。它可以是以下值之一：CupertinoTimerPickerMode.hms（默认）、CupertinoTimerPickerMode.hm、CupertinoTimerPickerMode.ms 或 CupertinoTimerPickerMode.s。

• initialTimerDuration：可选参数，指定计时器的初始持续时间。它默认为零。

• minuteInterval：一个可选参数，指定分钟微调器的粒度。它必须是能整除 60 的正整数。默认为 1。

• secondInterval：可选参数，指定第二个微调器的粒度。它必须是能整除 60 的正整数。默认为 1。

• alignment：一个可选参数，指定计时器选择器应如何在其可用空间内定位。它默认位于中心。

• backgroundColor：可选参数，指定计时器选择器的背景颜色。它默认为白色。

• onTimerDurationChanged：当用户更改计时器持续时间时调用的必需回调函数。它采用 Duration 参数作为新的持续时间。

• 例子

我们在屏幕中间显示时间和一个按钮，点击按钮会从底部弹出 CupertinoTimerPicker，然后就可以选择需要的时间。代码如下：

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

void main() => runApp(const TimerPickerApp());

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

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      debugShowCheckedModeBanner: false,
      theme: CupertinoThemeData(brightness: Brightness.light),
      title: "KindaCode.com",
      home: KindaCodeDemo(),
    );
  }
}

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

  @override
  State<KindaCodeDemo> createState() => _KindaCodeDemoState();
}

class _KindaCodeDemoState extends State<KindaCodeDemo> {
  // The duration the user has selected.
  // In the beginning, it is set to 10 minutes and 30 seconds.
  Duration duration = const Duration(minutes: 10, seconds: 30);

  // This function is triggered when the "show timer picker" button is pressed.
  void _showDialog() {
    showCupertinoModalPopup(
      context: context,
      builder: (BuildContext context) => Container(
        height: 300,
        padding: const EdgeInsets.only(top: 6.0),
        margin: EdgeInsets.only(
          bottom: MediaQuery.of(context).viewInsets.bottom,
        ),
        color: CupertinoColors.systemBackground.resolveFrom(context),
        child: SafeArea(
          top: false,
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  // Close the modal
                  CupertinoButton(
                    child: const Text('Cancel'),
                    onPressed: () => Navigator.pop(context),
                  ),
                  // Save the duration and close the modal
                  CupertinoButton(
                    child: const Text('Done'),
                    onPressed: () {
                      Navigator.pop(context);
                      setState(() {});
                    },
                  ),
                ],
              ),
              // The timer picker widget
              Expanded(
                child: CupertinoTimerPicker(
                  mode: CupertinoTimerPickerMode.hms,
                  initialTimerDuration: duration,
                  secondInterval: 5,
                  // This is called when the user changes the timer's
                  // duration.
                  onTimerDurationChanged: (Duration newDuration) {
                    duration = newDuration;
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text('KindaCode.com'),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              duration.toString().split('.').first,
              style: const TextStyle(fontSize: 40),
            ),
            const SizedBox(height: 20),
            CupertinoButton.filled(
              onPressed: _showDialog,
              child: const Text('Show Timer Picker'),
            ),
          ],
        ),
      ),
    );
  }
}