当计时器 运行 时，文本字段文本不断被删除

Question

我正在尝试重建曾经用原生制作的应用程序 android 我正在用 flutter 重建它
我已经设置了一个计时器和一个文本字段，每当我在文本字段上写字时，它就会被计时器每秒删除一次，有什么办法可以 运行 时间而不删除文本字段上的文本 下面是我的代码

import 'dart:async';
import 'dart:io';
import 'dart:math';
import 'math_utils.dart';
import 'package:flutter/material.dart';

class GameScreen extends StatefulWidget {
  @override
  State<GameScreen> createState() => _GameScreenState();
}

class _GameScreenState extends State<GameScreen> {
  int n1 = Random().nextInt(13) + 0;
  int n2 = Random().nextInt(13) + 0;
  int lives = 3;
  int score = 0;
  FocusNode node = FocusNode();
  int sec = 60;

  @override
  void initState(){
    Timer.periodic(const Duration(seconds: 1), (timer) {
      setState(() {
        sec--;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    TextEditingController controller = TextEditingController();
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.black,
        body: Container(
          width: size.width,
          child: SingleChildScrollView(
            child: Container(
              decoration: BoxDecoration(
                color: Colors.black54,
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Padding(
                      padding: EdgeInsets.only(
                        top: getVerticalSize(
                          16.00,
                        ),
                        bottom: getVerticalSize(
                          20.00,
                        ),
                      ),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Align(
                            alignment: Alignment.centerLeft,
                            child: Container(
                              width: size.width,
                              child: Padding(
                                padding: EdgeInsets.only(
                                  left: getHorizontalSize(
                                    16.00,
                                  ),
                                  right: getHorizontalSize(
                                    16.00,
                                  ),
                                ),
                                child: Row(
                                  mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  mainAxisSize: MainAxisSize.max,
                                  children: [
                                    Padding(
                                      padding: EdgeInsets.only(
                                        top: getVerticalSize(
                                          3.00,
                                        ),
                                      ),
                                      child: Row(
                                        crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                        mainAxisSize: MainAxisSize.min,
                                        children: [
                                          lives >= 1? Image.asset(
                                            "assets/heart.webp",
                                            height: getSize(
                                              32.00,
                                            ),
                                            width: getSize(
                                              32.00,
                                            ),
                                            fit: BoxFit.fill,
                                          ): SizedBox(
                                            height: getSize(
                                              32.00,
                                            ),
                                            width: getSize(
                                              32.00,
                                            ),
                                          ),
                                          lives >= 2? Image.asset(
                                            "assets/heart.webp",
                                            height: getSize(
                                              32.00,
                                            ),
                                            width: getSize(
                                              32.00,
                                            ),
                                            fit: BoxFit.fill,
                                          ): SizedBox(
                                            height: getSize(
                                              32.00,
                                            ),
                                            width: getSize(
                                              32.00,
                                            ),
                                          ),
                                          lives >= 3? Image.asset(
                                            "assets/heart.webp",
                                            height: getSize(
                                              32.00,
                                            ),
                                            width: getSize(
                                              32.00,
                                            ),
                                            fit: BoxFit.fill,
                                          ): SizedBox(
                                            height: getSize(
                                              32.00,
                                            ),
                                            width: getSize(
                                              32.00,
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                    Text(
                                      "Score: $score",
                                      overflow: TextOverflow.ellipsis,
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                        color: Colors.white70,
                                        fontSize: getFontSize(
                                          24,
                                        ),
                                        fontFamily: 'Inter',
                                        fontWeight: FontWeight.w400,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                          Container(
                            width: getHorizontalSize(
                              40.00,
                            ),
                            margin: EdgeInsets.only(
                              left: getHorizontalSize(
                                96.00,
                              ),
                              top: getVerticalSize(
                                12.00,
                              ),
                              right: getHorizontalSize(
                                96.00,
                              ),
                            ),
                            child: Text(
                              "$sec",
                              maxLines: null,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                color: Colors.white70,
                                fontSize: getFontSize(
                                  24,
                                ),
                                fontFamily: 'Inter',
                                fontWeight: FontWeight.w400,
                              ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(
                              left: getHorizontalSize(
                                96.00,
                              ),
                              top: getVerticalSize(
                                200.00,
                              ),
                              right: getHorizontalSize(
                                96.00,
                              ),
                            ),
                            child: Text(
                              "${n1} x ${n2}",
                              overflow: TextOverflow.ellipsis,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                color: Colors.white70,
                                fontSize: getFontSize(
                                  64,
                                ),
                                fontFamily: 'Inter',
                                fontWeight: FontWeight.w400,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  TextField(
                    focusNode: node,
                    controller: controller,
                    textAlign: TextAlign.center,
                    onSubmitted: (value) async{
                      setState(() {
                        if(value == (n1 * n2).toString()){
                          score += 10;
                          n1 = Random().nextInt(13) + 0;
                          n2 = Random().nextInt(13) + 0;
                          print(true);
                        }
                        else {
                          lives -= 1;
                          print(false);
                        }

                      });
                      controller.clear();
                      Future sleep(final Duration duration) async {
                        await Future.delayed(duration);
                      }
                      await sleep(Duration(milliseconds: 10));
                      node.requestFocus();
                    },
                    autofocus: true,
                    decoration: InputDecoration(
                      border: InputBorder.none
                    ),
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 48
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

将 TextEditingController 移到构建函数之外。

当调用 setState(() {}) 时，构建函数被重新调用，它将控制器重新分配给一个空字符串的新值，并且由于它附加到 TextField，文本字段中的值将重置。