You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter/Dart糖尿病应用布局修改及resultTextFieldController代码位置咨询

问题描述

我是编程新手,开发了一款简易糖尿病管理应用,当前布局为一行4个输入框,下方展示input1-input2的计算结果。现希望将布局修改为两行,每行均为「输入/输入/输出」结构(输出采用类输入框组件)。

之前在StackOverflow上看到建议用代码resultTextFieldController.text = resultOfCalculation;将计算结果放入文本框,但始终无法确定该代码的正确放置位置,此前尝试的位置均出现红色下划线报错。

以下为当前应用的代码及界面截图:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Help with a meal....';
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appTitle),
          backgroundColor: Colors.grey,
          foregroundColor: Colors.black,
        ),
        body: const AddTwoNumbers(),
      ),
    );
  }
}

class AddTwoNumbers extends StatefulWidget {
  const AddTwoNumbers({super.key});

  @override
  // ignore: library_private_types_in_public_api
  _AddTwoNumbersState createState() => _AddTwoNumbersState();
}

class _AddTwoNumbersState extends State<AddTwoNumbers> {
  TextEditingController num1controller = TextEditingController();
  TextEditingController num2controller = TextEditingController();
  TextEditingController num3controller = TextEditingController();
  TextEditingController num4controller = TextEditingController();
  String result = "0";

  _calculate() {
    if (num1controller.text.isNotEmpty && num2controller.text.isNotEmpty) {
      setState(() {
        double sum = double.parse(num1controller.text) -
            double.parse(num2controller.text);
        result = sum.toStringAsFixed(1);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Container(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            children: [
              Row(
                children: <Widget>[
                  Expanded(
                    child: TextField(
                      textAlign: TextAlign.center,
                      style: const TextStyle(fontSize: 20.0),
                      onChanged: (value) => _calculate(),
                      keyboardType:
                          const TextInputType.numberWithOptions(decimal: true),
                      controller: num1controller,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Target Level',
                        hintText: 'Enter First Number',
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 8,
                  ),
                  Expanded(
                    child: TextField(
                      textAlign: TextAlign.center,
                      style: const TextStyle(fontSize: 20.0),
                      onChanged: (value) => _calculate(),
                      keyboardType:
                          const TextInputType.numberWithOptions(decimal: true),
                      controller: num2controller,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Current Level',
                        hintText: 'Enter Second Number',
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 8,
                  ),
                  Expanded(
                    child: TextField(
                      onChanged: (value) => _calculate(),
                      keyboardType:
                          const TextInputType.numberWithOptions(decimal: true),
                      controller: num3controller,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Current Meal carbs',
                        hintText: 'Enter Third Number',
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 8,
                  ),
                  Expanded(
                    child: TextField(
                      onChanged: (value) => _calculate(),
                      keyboardType:
                          const TextInputType.numberWithOptions(decimal: true),
                      controller: num4controller,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Current Meal carbs 2',
                        hintText: 'Enter Fourth Number',
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 8,
                  ),
                ],
              ),
              Text(
                  'Difference between Target Level and Current Level: $result'),
            ],
          ),
        ),
      ),
    );
  }
}

界面截图

当前应用界面1
当前应用界面2

内容的提问来源于stack exchange,提问作者rnmuk

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.09 17:05:14