Flutter：TextField 的提示文本未在屏幕 UI 中更新

Question

Using builTextField() method to create textField, passing different controller.
TextEditingController phoneController;
TextEditingController otpController;
builTextField(phoneController),
builTextField(otpController),

hintText 使用 phoneController.text 和 otpController.text 填充各个文本字段。

同样，

using buildRaisedButton() method to create Button, passing differetnt callback.
buildRaisedButton('Register', registrationCallback),
buildRaisedButton('Verify', verifyOTPCallback),
buildRaisedButton('Reset',resetCallback),

在按钮上单击“重置”，想要清除两个文本字段的 hitText

resetCallback(){
    print('cleared ....');
    setState(() {
      phoneController.clear();
      otpController.clear();
    });
  }

看起来 controller.clear 正在将 conroller.text 值重置为 empty('')，但由于hintText 的值被选择为 conroller.text，因此也应该在屏幕中更新为“empty”。但不幸的是，尽管将代码包装在 setState() 中，但它并没有反映在 UI 中

buildTextField()

Widget buildTextField(TextEditingController controller, ) {
    return Container(
      height: 40.0,
      width: 200.0,
      decoration: BoxDecoration(
        color: Colors.blueAccent,
        borderRadius: BorderRadius.circular(32),
      ),
      child: TextField(
        keyboardType: TextInputType.number,
        style: kPhoneAuthTextFields,
        decoration: InputDecoration(
          hintStyle: kPhoneAuthTextFields,
          hintText:controller.text,
          suffixIcon: Icon(Icons.phone_android,size: 20,color: Colors.white,),
          border: InputBorder.none,
          contentPadding: EdgeInsets.only(top: 5.0, left: 30.0),
        ),
        onChanged: (value) {
          controller.text = value;
        },
      ),
    );
  }

buildRaisedButton()

Widget buildRaisedButton(String label, Function callback){
    return Container(
      height: 40.0,
      width: 100.0,
      child: RaisedButton(
        child:Text(
          label,
          style: kPhoneLoginTextStyle,
        ),
        color: Colors.blue,
        //padding: EdgeInsets.all(8.0),
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(40.0)),
        onPressed: callback,
      ),
    );
  }

任何帮助，不胜感激...在此先感谢...

Answer 1

您可以在下面复制粘贴运行完整代码
在您的情况下，您可以在buildTextField 中提供UniqueKey()
代码sn-p

Widget buildTextField(TextEditingController controller,) {
    return Container(
      key: UniqueKey(),

工作演示

完整代码

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> {
  int _counter = 0;
  TextEditingController phoneController = TextEditingController();
  TextEditingController otpController = TextEditingController();

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  Widget buildTextField(
    TextEditingController controller,
  ) {
    return Container(
      key: UniqueKey(),
      height: 40.0,
      width: 200.0,
      decoration: BoxDecoration(
        color: Colors.blueAccent,
        borderRadius: BorderRadius.circular(32),
      ),
      child: TextField(
        keyboardType: TextInputType.number,
        //style: kPhoneAuthTextFields,
        decoration: InputDecoration(
          hintStyle: TextStyle(color: Colors.orange),
          hintText: controller.text,
          suffixIcon: Icon(
            Icons.phone_android,
            size: 20,
            color: Colors.white,
          ),
          border: InputBorder.none,
          contentPadding: EdgeInsets.only(top: 5.0, left: 30.0),
        ),
        onChanged: (value) {
          controller.text = value;
        },
      ),
    );
  }

  Widget buildRaisedButton(String label, Function callback) {
    return Container(
      height: 40.0,
      width: 100.0,
      child: RaisedButton(
        child: Text(
          label,
          //style: kPhoneLoginTextStyle,
        ),
        color: Colors.blue,
        //padding: EdgeInsets.all(8.0),
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(40.0)),
        onPressed: callback,
      ),
    );
  }

  resetCallback() {
    print('cleared ....');
    setState(() {
      phoneController.clear();
      otpController.clear();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            buildTextField(phoneController),
            buildTextField(otpController),
            buildRaisedButton('Reset', resetCallback),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}