Flutter: 自研小时与分钟时间选择器

2024-01-23 16:34:34

引言

Flutter是一个开源的移动应用框架，它可以帮助您使用相同的代码库构建 Android 和 iOS 应用程序。

最近，我在自己的Flutter项目中需要使用iOS风格的小时与分钟的时间选择器。本来开箱即用的CupertinoDatePicker就基本上可以满足需求，奈何项目里大部分都是黑色背景，而CupertinoDatePicker无法设置文本颜色，结果就是一团黑，根本看不清楚选择的什么。

为了解决这个问题，我决定自己撸一个时间选择器。这个时间选择器不仅适用于黑色背景，还具有iOS风格，且可自定义颜色。

实现

首先，我们需要创建一个新的Flutter项目。

flutter create time_picker

然后，我们需要在项目中添加必要的依赖项。

dependencies:
  flutter:
    sdk: flutter

接下来，我们需要创建一个新的Dart文件，命名为time_picker.dart。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Time Picker',
      home: MyHomePage(),
    );
  }
}

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Time Picker'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Time: ${_selectedDate.hour}:${_selectedDate.minute}',
            ),
            RaisedButton(
              onPressed: () {
                _selectTime(context);
              },
              child: Text('Select Time'),
            ),
          ],
        ),
      ),
    );
  }

  void _selectTime(BuildContext context) async {
    final TimeOfDay? picked = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.fromDateTime(_selectedDate),
    );
    if (picked != null && picked != _selectedDate) {
      setState(() {
        _selectedDate = DateTime(
          _selectedDate.year,
          _selectedDate.month,
          _selectedDate.day,
          picked.hour,
          picked.minute,
        );
      });
    }
  }
}