小工具在Flutter上的拍子上未更改

Question

因此，我正在尝试构建具有所有功能的Instagram之类的图像编辑器。我想在点击两个文本字段和一个简单的文本小部件之间切换。我在网上找到了一个示例，但在我的情况下不起作用。

class _StateTextFieldState extends State<StateTextField> {
  FocusNode focusNode;
  GlobalKey key = GlobalKey();
  TextEditingController controller;
  Offset offset = Offset(1, 1);
  Color textColor;
  double fontSize;
  bool highlighted;
  final ValueNotifier<Matrix4> notifier = ValueNotifier(Matrix4.identity());
  Color pickerColor = Color(0xffffffff);
  Color currentColor = Color(0xffffffff);

  void changeColor(Color color) {
    setState(() => pickerColor = color);
  }

  @override
  void initState() {
    highlighted = widget.highlighted;
    focusNode = widget.focusNode;
    focusNode.addListener(() {
      setState(() {
        highlighted = true;
      });
    });
    controller = TextEditingController();
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    double fontSize = 24;
    String text = "Enter Text!";
    bool isEditing = false;
    double textWidth = MediaQuery.of(context).size.width * 0.6;
    return Container(
      key: key,
      height: MediaQuery.of(context).size.height * 0.6,
      child: MatrixGestureDetector(
          onMatrixUpdate: (Matrix4 m, Matrix4 tm, Matrix4 sm, Matrix4 rm) {
            setState(() {
              notifier.value = m;
            });
          },
          child: Transform(
            transform: notifier.value,
            child: Row(
              children: <Widget>[
                Container(
                  decoration: BoxDecoration(
                    color: Colors.transparent,
                    border: highlighted
                        ? Border.all(color: Colors.black, width: 2)
                        : Border.all(color: Colors.transparent),
                  ),

                  // color: Colors.redAccent,
                  width: textWidth,
                  child:
                      //_editTitleTextField(controller)
                      isEditing
                          ? TextField(
                              textAlign: TextAlign.center,
                              autofocus: true,
                              onEditingComplete: () {
                                setState(() {
                                  text = controller.text;
                                  isEditing = false;
                                  focusNode.unfocus();
                                  print(isEditing);
                                  highlighted = false;
                                });
                              },
                              style: TextStyle(
                                  color: currentColor, fontSize: fontSize),
                              decoration: InputDecoration(
                                  enabledBorder: UnderlineInputBorder(
                                    borderSide:
                                        BorderSide(color: Colors.transparent),
                                  ),
                                  focusedBorder: UnderlineInputBorder(
                                    borderSide: BorderSide(color: Colors.blue),
                                  ),
                                  fillColor: Colors.red,
                                  hintText: "Enter text",
                                  hintStyle: TextStyle(color: Colors.red)),
                              maxLines: 1,
                              focusNode: focusNode,
                              //  maxLength: 100,
                            )
                          : Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                Text(
                                  text,
                                  style: TextStyle(fontSize: 18),
                                ),
                                IconButton(
                                    icon: Icon(Icons.edit, color: Colors.white),
                                    onPressed: () {
                                      setState(() {
                                        print(widget);
                                        isEditing = true;
                                        print(isEditing);
                                      });
                                    })
                              ],
                            ),
                ),
              ],
            ),
          )
          //         ),
          ),
    );
  }

我的问题是，即使isEditing在单击Iconbutton时发生更改，该小部件也不会重建，并且保持不变。我要去哪里错了？

Answer 1

您必须将变量从build方法移动到class方法。当前，每次您重新构建窗口小部件（例如，通过点击按钮）时，您的变量将获得默认值

class _StateTextFieldState extends State<StateTextField> {
 ... your code...
 double fontSize = 24;
 String text = "Enter Text!";
 bool isEditing = false;

 @override
 Widget build(BuildContext context) {
   ... your code ...
  }
}