为什么 TextField 在 Flutter 中输入时会一直重置为原始值？

Question

我在 Flutter 中制作了一个带有占位符值的 TextField，以便用户可以编辑该值。但是，当我尝试编辑该字段时，每毫秒（我什至没有时间输入超过 3 个字符）该字段都会不断重置为原始值。我该如何解决这个问题？

下面是 Controller/Text 字段的样子，都在有状态小部件的 build() 函数中：

  @override
  Widget build(BuildContext context) {
    balance = globals.user.balance;
    String balancePretty = Utils.getMoneyPretty(balance);

    TextEditingController balanceController = TextEditingController(text: balancePretty)

    TextField balanceField = TextField(
      cursorColor: Colors.green,
      controller: balanceController,
      style: TextStyle(fontWeight: FontWeight.normal, color: Colors.green),
      onSubmitted: (text) {
        print("First text field: $text");
      },
    );

    return Scaffold(
        body: new Container(
            child: new Column(
            children: <Widget>[
                balanceField,
            ])));
    }

Answer 1

要制作占位符（提示），您需要使用 TextField 的 hintText 属性。您正在做的是将文本传递给控制器，而不是设置 placeholder/hint.

Answer 2

您可以复制粘贴运行下面的完整代码
原因：因为你把 TextEditingController balanceController 放在 build
解决方案：您可以在 initState

中初始化占位符值

代码片段

TextEditingController balanceController;

@override
void initState() {
    //balance = globals.user.balance;
    String balancePretty = "123"; //Utils.getMoneyPretty(balance);
    balanceController = TextEditingController(text: balancePretty);
    super.initState();
}

工作演示

完整代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController balanceController;

  @override
  void initState() {
    //balance = globals.user.balance;
    String balancePretty = "123"; //Utils.getMoneyPretty(balance);
    balanceController = TextEditingController(text: balancePretty);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    TextField balanceField = TextField(
      cursorColor: Colors.green,
      controller: balanceController,
      style: TextStyle(fontWeight: FontWeight.normal, color: Colors.green),
      onSubmitted: (text) {
        print("First text field: $text");
      },
    );

    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: new Container(
            child: new Column(children: <Widget>[
          balanceField,
        ])));
  }
}

Answer 3

您的文本编辑控制器在您的构建方法中，因此当小部件重建时（即当您开始输入时）它会将值重置回您提供的初始值。

所以让它成为一个全局变量应该没问题（像这样:)

 TextEditingController balanceController = TextEditingController(text:balancePretty)
 @override
  Widget build(BuildContext context) {
  balance = globals.user.balance;
  String balancePretty = Utils.getMoneyPretty(balance);

为什么 TextField 在 Flutter 中输入时会一直重置为原始值？

Why does TextField keep resetting to Original Value while typing in Flutter?

forms

uitextfield

flutter