FlatButton的onPressed将其值从TextField的onChange函数设置的变量打印为空

Question

当TextField中的值发生更改时，我尝试捕获更改，将其打印出来，然后将其分配给newTaskTitle变量。我只能从TextField的onChange功能捕获更改并将其打印到控制台。但是，当我将值分配给newTaskTitle时，在我尝试从FlatButton的onPress函数将其值打印到控制台以使其为空之前，它似乎工作正常。似乎好像从来没有从TextField的onChange函数中分配值。

仅在将newTaskTitle变量上移到类定义上方时，问题才会消失。

这是什么原因？

代码如下所示。

import 'package:flutter/material.dart';

class AddTaskScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String newTaskTitle;

    return Material(
      child: Container(
        color: Color(0xff757575),
        child: Container(
          padding: EdgeInsets.all(20.0),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20.0),
              topRight: Radius.circular(20.0),
            ),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Text(
                'Add Task',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 30.0,
                  color: Colors.lightBlueAccent,
                ),
              ),
              TextField(
                autofocus: true,
                textAlign: TextAlign.center,
                onChanged: (newText) {
                  newTaskTitle = newText;
                  // prints the equal value

                  print(newText);
                },
              ),
              FlatButton(
                child: Text(
                  'Add',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                color: Colors.lightBlueAccent,
                onPressed: () {
                  print(newTaskTitle);
                  // Navigator.pop(context);
                },
              ),
              RaisedButton(
                onPressed: () {
                  // prints null

                  print(newTaskTitle);
                  // Navigator.pop(context);
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

我认为您应该尝试从构建函数中移出String newTaskTitle;，然后将其设为静态属性。变成static String newTaskTitle;

Answer 2

这是因为未重建组件，所以打印的值将始终是初始值（即null），而不是您使用TextField更新的值。

您只能在Statefull组件中重新构建Build方法。您可以选择其中之一，也可以更改整个结构，或者使用StatefullBuilder()

首先，您必须更改变量的位置：

String newTaskTitle;

Widget build(BuildContext context) {
 ...
}

第二，您必须使用setstate（），在这种情况下，您有两个选择：

第一选项：

    TextField(
      onChanged: (newText) => setState(() => newTaskTitle = newText),    
    ),

第二个选项：

    RaisedButton(
      onPressed: () {
        setState(() {});
        print(newTaskTitle)
      }
    )

Answer 3

我怀疑此行newTaskTitle = newText;不会重建您的页面。通过将其置于构建函数之外，尝试使其成为页面状态。

String newTaskTitle;

@override
void build(BuildContext context) {
  ...

尝试将其包装在setState()中。

setState(() => newTaskTitle = newText);