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'), ], ), ), ), ); } }
界面截图


内容的提问来源于stack exchange,提问作者rnmuk
相关产品推荐
相关产品推荐

