flutter 使用TextEditingController设置初始值后,抖动编辑TextField中的值

ogq8wdun  于 2023-02-05  发布在  Flutter
关注(0)|答案(1)|浏览(191)

我将一些用户信息从第一个屏幕传递到第二个屏幕,并尝试在第二个屏幕的TextField中编辑这些信息。

class EditProfile extends StatefulWidget {
  String profName;
  String profOcc;
  EditProfile({Key? key, required this.profName, required this.profOcc,}): super(key: key);

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

class _EditProfileState extends State<EditProfile> {

  @override
  Widget build(BuildContext context) {
    var nameController = TextEditingController()..text = widget.profName;
    var occController = TextEditingController()..text = widget.profOcc;

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).scaffoldBackgroundColor,
        elevation: 1,
        leading: IconButton(
          icon: Icon(
            Icons.arrow_back,
            color: Color(0xFF6f6bdb),
          ),
          onPressed: (){
            Navigator.pop(context);
          },
          ),
    ),
    body: Container(
      padding: EdgeInsets.fromLTRB(30.0, 30.0, 30.0, 0.0),
      child: GestureDetector(
        onTap: () {FocusScope.of(context).unfocus();},
        child: ListView(
          children: [
            Text(
              "Edit Profile",
            ),
            SizedBox(height: 20.0),
            createInputField("NAME", nameController),
            createInputField("OCCUPATION", occController),
            SizedBox(height: 25.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                ElevatedButton(
                  onPressed: () async {
                    //// Update the values when pressed
                  },
                  style: ElevatedButton.styleFrom(
                    primary: Color(0xFF6f6bdb), // background
                    padding: EdgeInsets.symmetric(horizontal: 50),
                  ),
                  child: Text(
                    "UPDATE",
                  )
                ),
              ],
            )
          ],
        ),
      ),
    ),
    );
  }

  TextField createInputField(String labelText, TextEditingController controller) {
    return TextField(
            controller: controller,
            decoration: InputDecoration(
              isDense: true,
              labelText: "$labelText:",
              floatingLabelBehavior: FloatingLabelBehavior.always,
              hintStyle: TextStyle(
                fontSize: 16, fontWeight: FontWeight.w700,
                color: Colors.black,
              )
            ),
          );
  }

我的问题是,由于我正在初始化小部件内部的文本编辑控制器,当我编辑TextField中的值,然后散焦该字段时,TextField中的值将恢复为初始值。有没有办法在小工具外部初始化文本编辑控制器,并且仍然使用我从第一个屏幕获得的值设置初始值?widget.profName在小部件之外不起作用。非常感谢对此的任何帮助。

b5buobof

b5buobof1#

你可以在build方法之外创建一个TextEditingController,方法是在init字段中设置它的值。

class SecondPage extends StatefulWidget {
  final String myString;
  const SecondPage({Key? key, required this.myString}) : super(key: key);

  @override
  State<SecondPage> createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {

late final TextEditingController controller;
  @override
  void initState() {
    super.initState();
    controller = TextEditingController(text: widget.myString);
  }
  
  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

如果将late赋给变量,则还可以使用另一种方法在init字段外赋值

class SecondPage extends StatefulWidget {
  final String myString;
  const SecondPage({Key? key, required this.myString}) : super(key: key);

  @override
  State<SecondPage> createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {

late final TextEditingController controller = TextEditingController(text: widget.myString);

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

请记住在停止使用textController后将其释放。https://api.flutter.dev/flutter/widgets/TextEditingController-class.html

相关问题