使用 Dart / Flutter，我将如何比较两个文本字段的值以提供持续时间输出？

Question

假设我有 2 个文本字段，例如，用户可以以 1400 格式输入 24 小时时间。文本字段 1 是班次的开始时间，文本字段 2 是结束时间。理想情况下，我希望在调用文本字段 onSubmit 时或即使其中一个文本字段失去焦点时，两次之间的持续时间显示在文本小部件中。我能够使用带 x.difference(y) 的 intl 包计算和显示 2 个硬编码字符串的持续时间，但我正在努力使用文本字段达到这一点。感谢您的帮助。

编辑在初始 post 之后考虑它，对文本字段的需求并不是 100% 必需的。要比较的两个时间可能来自日期时间选择器之类的东西。重要的是我尝试了文本字段、日期时间选择器和时间选择器，但无法找到解决方案。

import 'package:flutter/material.dart';

class ActivityLog extends StatefulWidget {
  @override
  _ActivityLogState createState() => _ActivityLogState();
}

class _ActivityLogState extends State<ActivityLog> {
  TextEditingController _controller1 = TextEditingController();
  TextEditingController _controller2 = TextEditingController();

  String duration = '0000';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Activity Log'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _controller1,
              maxLength: 4,
              maxLines: 1,
              keyboardType: TextInputType.datetime,
              decoration: InputDecoration(
                labelText: 'Start time',
                hintText: 'hhmm',
                counterText: '',
              ),
            ),
            TextField(
              controller: _controller2,
              maxLength: 4,
              maxLines: 1,
              keyboardType: TextInputType.datetime,
              decoration: InputDecoration(
                labelText: 'Finish time',
                hintText: 'hhmm',
                counterText: '',
              ),
            ),
            Text('Duration: $duration'),
            /*
            can't figure out how to get the input from the textfields in the format of
            HHmm (hours and minutes) and calculate the duration which is to be displayed
            in the text widget above 
            */
          ],
        ),
      ),
    );
  }
}

Answer 1

看看下面的方法是否适合您。显然，我没有进行任何验证，但这可能是一个开始，您可以以此为基础进行构建。这是它的外观图 here。

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

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

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

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

class _MyAppState extends State<MyApp> {
  final _controller1 = TextEditingController();
  final _controller2 = TextEditingController();

  var _result = "";

  String addColon(String s) {
    return s.substring(0, 2) + ":" + s.substring(2);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              TextField(controller: _controller1),
              TextField(controller: _controller2),
              ElevatedButton(
                  onPressed: () {
                    var _d1 =
                        DateFormat.Hm().parse(addColon(_controller1.text));
                    var _d2 =
                        DateFormat.Hm().parse(addColon(_controller2.text));

                    setState(() {
                      _result =
                          '${_d2.difference(_d1).inSeconds.toString()} seconds';
                    });
                  },
                  child: const Text("Diff")),
              const SizedBox(height: 50),
              Text(_result),
            ],
          ),
        ),
      ),
    );
  }
}

使用 Dart / Flutter，我将如何比较两个文本字段的值以提供持续时间输出？

Using Dart / Flutter, how would I compare the values of two textfields to provide a time duration output?

flutter

datetime

dart

intl