Flutter：创建一个接受 4 个数字并将其格式化为小时：分钟（HH：MM）的 TextField？

Question

我想要一个打开键盘的 TextField，用户必须点击 4（如果可能，当时间在 01-09 之间时，如果可能，请点击 3）。

TextField onChange 方法应将其格式化为好看的 HH:MM 格式。

到目前为止，我有这个：

TextField(
   controller: _controller,
   style: TextStyle(
            color: Colors.white,
            fontSize: 24,
           ),
   onChanged: (value) {},
   keyboardType: TextInputType.number,
)

尝试使用正则表达式，但它不允许我输入任何内容：

TextField(
   controller: _controller,
   style: TextStyle(
            color: Colors.white,
            fontSize: 24,
           ),
   onChanged: (value) {},
   keyboardType: TextInputType.number,
   inputFormatters: <TextInputFormatter>[
           FilteringTextInputFormatter.allow(RegExp("^(?:[01]?\d|2[0-3])(?::(?:[0-5]\d?)?)?\$")),
           ],
)

提前致谢。

Answer 1

替换此代码：还添加 intl: ^0.17.0 import this package for date format

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:intl/intl.dart';

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

  @override
  _MyDataState createState() => _MyDataState();
}

class _MyDataState extends State<MyData> {

  TextEditingController _controller = TextEditingController();
  final formatter = DateFormat('HH:mm a');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
      body: SafeArea(
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextField(
                inputFormatters: [
                  LengthLimitingTextInputFormatter(4),
                ],
                controller: _controller,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
                onChanged: (value) {},
                keyboardType: TextInputType.number,
              ),
            )
          ],
        ),
      ),
    );
  }
}