在 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 在单击图标按钮时发生更改，小部件也不会重建并且保持不变。 我哪里错了？

Answer 1

您必须将变量从构建方法移动到 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 ...
  }
}

Answer 2

这里的问题是，您正在使用 setState，而 setState 的功能是通过调用构建 function 再次重建 UI。

@override 
Widget build(BuildContext context) {
   double fontSize = 24;
   String text = "Enter Text!";
   bool isEditing = false;

   return Container(
   .. . .. 
   . . . 
}

因此，每当您调用 setState 时，每次都会调用此 function 并且您的变量会重新初始化，因此，您需要将这些变量设为 class 成员，而不是将它们设为构建 ZC1C425268E18385D1AB507 的局部变量。

class _StateTextFieldState extends State<StateTextField> {
bool isEditing =false;
. . . 
. . .
@override 
Widget build(BuildContext context) {
   return Container( . . );
}

希望这可以帮助！