Flutter：基于用户输入动态更新TextField值

k4ymrczo 于 2023-06-07 发布在 Flutter

关注(0)|答案(2)|浏览(335)

我目前正在开发我的Flutter应用程序，在实现特定功能时遇到了困难。目标是在由三个TextField组成的页面上自动填充和禁用第三个TextField，一旦任何两个TextField已填充。此外，当至少一个已填充的TextField被清除时，应重新启用已禁用的TextField。

举例说明：

在第一种情况下，在第一和第二字段中输入数据时，第三字段应被禁用，并且其值应是第一和第二字段中输入的值的乘积。因此，每当在第一或第二字段中输入时，第三字段的值应相应地更新。

在另一种情况下，如果在第一个和第三个字段中输入数据，则第二个字段应被禁用，并且其值应自动更新。同样，我希望第一个字段在第二个和第三个字段中输入时表现出相同的行为。
我尝试使用TextEditingController和TextField的onChanged函数创建一个函数，但我无法实现对TextField值的连续更新。因此，我将非常感谢在这一问题上的任何援助。
提前感谢您的支持。

来源：https://stackoverflow.com/questions/76359872/flutter-dynamically-updating-textfield-values-based-on-user-input

2条答案

按热度按时间

你可以使用TextEditingController和flag var组合来实现你所需要的。还有很多其他的方法。下面我添加了工作示例实现。

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MathScreen(),
    );
  }
}

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

  @override
  State<MathScreen> createState() => _MathScreenState();
}

class _MathScreenState extends State<MathScreen> {
  bool t1 = true;
  bool t2 = true;
  bool t3 = true;

  TextEditingController t1Controller = TextEditingController();
  TextEditingController t2Controller = TextEditingController();
  TextEditingController t3Controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(32.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Expanded(
                child: Row(
                  children: [
                    Expanded(
                      child: TextField(
                        enabled: t1,
                        keyboardType: TextInputType.number,
                        controller: t1Controller,
                        decoration: InputDecoration(
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(30.0),
                          ),
                          filled: true,
                          hintStyle: TextStyle(
                            color: Colors.grey[800],
                          ),
                          hintText: "",
                          label: Text("Amount"),
                          fillColor: Colors.white70,
                        ),
                        onChanged: (value) {
                          if ((t3Controller.text == "" || !t3) &&
                              (t2Controller.text != "")) {
                            setState(() {
                              t3 = false;
                              t1 = true;
                              t2 = true;
                              t3Controller.text = value == ""
                                  ? ""
                                  : (num.parse(value) *
                                          num.parse(t2Controller.text))
                                      .toString();
                            });
                          }
                          if (t3Controller.text != "" &&
                              (t2Controller.text == "" || !t2)) {
                            setState(() {
                              t2 = false;
                              t1 = true;
                              t3 = true;
                              t2Controller.text = value == ""
                                  ? ""
                                  : (num.parse(t3Controller.text) /
                                          num.parse(value))
                                      .toString();
                            });
                          }
                          if (t2Controller.text == "" &&
                              t1Controller.text == "" &&
                              t3Controller.text == "") {
                            setState(() {
                              t2 = true;
                              t1 = true;
                              t3 = true;
                            });
                          }
                        },
                      ),
                    ),
                    Text(" X "),
                    Expanded(
                      child: TextField(
                        enabled: t2,
                        keyboardType: TextInputType.number,
                        controller: t2Controller,
                        decoration: InputDecoration(
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(30.0),
                          ),
                          filled: true,
                          hintStyle: TextStyle(
                            color: Colors.grey[800],
                          ),
                          hintText: "",
                          label: Text("Unit Price"),
                          fillColor: Colors.white70,
                        ),
                        onChanged: (value) {
                          if ((t1Controller.text == "" || !t1) &&
                              (t3Controller.text != "")) {
                            setState(() {
                              t1 = false;
                              t2 = true;
                              t3 = true;
                              t1Controller.text = value == ""
                                  ? ""
                                  : (num.parse(t3Controller.text) /
                                          num.parse(value))
                                      .toString();
                            });
                          }
                          if (t1Controller.text != "" &&
                              (t3Controller.text == "" || !t3)) {
                            setState(() {
                              t3 = false;
                              t1 = true;
                              t2 = true;
                              t3Controller.text = value == ""
                                  ? ""
                                  : (num.parse(value) *
                                          num.parse(t1Controller.text))
                                      .toString();
                            });
                          }
                          if (t2Controller.text == "" &&
                              t1Controller.text == "" &&
                              t3Controller.text == "") {
                            setState(() {
                              t2 = true;
                              t1 = true;
                              t3 = true;
                            });
                          }
                        },
                      ),
                    ),
                    Text(" = "),
                    Expanded(
                      child: TextField(
                        enabled: t3,
                        keyboardType: TextInputType.number,
                        controller: t3Controller,
                        decoration: InputDecoration(
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(30.0),
                          ),
                          filled: true,
                          hintStyle: TextStyle(
                            color: Colors.grey[800],
                          ),
                          hintText: "",
                          label: Text("Total Price"),
                          fillColor: Colors.white70,
                        ),
                        onChanged: (value) {
                          if ((t1Controller.text == "" || !t1) &&
                              (t2Controller.text != "")) {
                            setState(() {
                              t1 = false;
                              t3 = true;
                              t2 = true;
                              t1Controller.text = value == ""
                                  ? ""
                                  : (num.parse(value) /
                                          num.parse(t2Controller.text))
                                      .toString();
                            });
                          }
                          if (t1Controller.text != "" &&
                              (t2Controller.text == "" || !t2)) {
                            setState(() {
                              t2 = false;
                              t1 = true;
                              t3 = true;
                              t2Controller.text = value == ""
                                  ? ""
                                  : (num.parse(value) /
                                          num.parse(t1Controller.text))
                                      .toString();
                            });
                          }
                          if (t2Controller.text == "" &&
                              t1Controller.text == "" &&
                              t3Controller.text == "") {
                            setState(() {
                              t2 = true;
                              t1 = true;
                              t3 = true;
                            });
                          }
                        },
                      ),
                    ),
                  ],
                ),
              ),
              ElevatedButton(
                  onPressed: () {
                    setState(() {
                      t2 = true;
                      t1 = true;
                      t3 = true;
                      t2Controller.text == "";
                      t1Controller.text == "";
                      t3Controller.text == "";
                    });
                  },
                  child: Text("Reset"))
            ],
          ),
        ),
      ),
    );
  }
}

赞(0）回复(0）举报 2023-06-07

为第一个字段中的每个文本字段设置一个控制器onChanged方法检查第二个文本字段是否为非空如果不是禁用第三个并进行计算如果它为空并且第三个文本字段为非空禁用第二个并进行计算
按照顺序在所有三个文本域上重复这种方法，然后处理空数据和清除数据。

赞(0）回复(0）举报 2023-06-07

相关问题

热门标签

Java query python Node 开发语言 request Util 数据库 Table 后端算法 Logger Message Element Parser

最新问答

xxl-job 安全组扫描到执行器端口服务存在信息泄露漏洞
回答(1) 发布于 3个月前
xxl-job 不能和nacos兼容？
回答(3) 发布于 3个月前
xxl-job 任务执行完后无法结束，日志一直转圈
回答(3) 发布于 3个月前
xxl-job-admin页面上查看调度日志样式问题
回答(1) 发布于 3个月前
xxl-job 参数512字符限制能否去掉
回答(1) 发布于 3个月前