Question

以下是一个简单的代码（在 main.dart 中），我试图用来回顾几个月前所做的Flutter基础知识。

在这里，在下面的代码中setState（）无法按预期工作，并且原因是状态错误。

我可以通过创建单独的statefulwidget使其具有状态，这些状态构成按钮和文本更改的以下元素。

但是我想知道在下面的代码中进行最小的更改是否可以匿名进行

import 'package:flutter/material.dart';

var textStrings = ["Hello", "Hi", "Hey", "Aloha"];
var counter = 0;

void main() => runApp(MaterialApp(
      title: "Hello",
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            "First App",
            style: TextStyle(
                color: Colors.white70,
                fontSize: 20,
                fontStyle: FontStyle.normal),
          ),
        ),
        body: Container(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Padding(padding: EdgeInsets.only(top: 20)),
                Card(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Padding(padding: EdgeInsets.only(bottom: 20)),
                      Center(
                        child: Text("With Flutter, Spread Fluttery",
                            style: TextStyle(
                                color: Colors.redAccent,
                                fontStyle: FontStyle.italic,
                                fontSize: 30)),
                      ),
                      Padding(padding: EdgeInsets.only(bottom: 20)),
                      Icon(
                        Icons.refresh,
                        size: 50,
                        color: Colors.amberAccent,
                      ),
                      Padding(padding: EdgeInsets.only(bottom: 20)),
                      Text(textStrings[counter % 4],
                          style: TextStyle(
                              color: Colors.black38,
                              fontSize: 30,
                              fontStyle: FontStyle.normal)),
                      Padding(padding: EdgeInsets.only(bottom: 20)),
                      RaisedButton(
                        onPressed: () {
                          setState() {
                            counter++;
                          }
                        },
                        child: Text("Enter",
                            style: TextStyle(
                              color: Colors.teal,
                              fontSize: 30,
                            )),
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    ));

Answer 1

当然，您可以添加几行代码，即可使用StatefulBuilder。

将容器包装在StatefulBuilder内，并在按钮的setState(() {} )方法内更改onPressed。

            void main() => runApp(MaterialApp(
                  title: "Hello",
                  home: Scaffold(
                      appBar: AppBar(
                        title: Text(
                          "First App",
                          style: TextStyle(
                              color: Colors.white70,
                              fontSize: 20,
                              fontStyle: FontStyle.normal),
                        ),
                      ),
                      body: StatefulBuilder(
                        builder: (context, setState) {
                          return Container(
                            child: Center(
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.start,
                                crossAxisAlignment: CrossAxisAlignment.stretch,
                                children: <Widget>[
                                  Padding(padding: EdgeInsets.only(top: 20)),
                                  Card(
                                    child: Column(
                                      crossAxisAlignment: CrossAxisAlignment.stretch,
                                      children: <Widget>[
                                        Padding(padding: EdgeInsets.only(bottom: 20)),
                                        Center(
                                          child: Text("With Flutter, Spread Fluttery",
                                              style: TextStyle(
                                                  color: Colors.redAccent,
                                                  fontStyle: FontStyle.italic,
                                                  fontSize: 30)),
                                        ),
                                        Padding(padding: EdgeInsets.only(bottom: 20)),
                                        Icon(
                                          Icons.refresh,
                                          size: 50,
                                          color: Colors.amberAccent,
                                        ),
                                        Padding(padding: EdgeInsets.only(bottom: 20)),
                                        Text(textStrings[counter % 4],
                                            style: TextStyle(
                                                color: Colors.black38,
                                                fontSize: 30,
                                                fontStyle: FontStyle.normal)),
                                        Padding(padding: EdgeInsets.only(bottom: 20)),
                                        RaisedButton(
                                          onPressed: () {
                                            setState(() {
                                              counter++;
                                            });
                                          },
                                          child: Text("Enter : $counter",
                                              style: TextStyle(
                                                color: Colors.teal,
                                                fontSize: 30,
                                              )),
                                        )
                                      ],
                                    ),
                                  )
                                ],
                              ),
                            ),
                          );
                        },
                      )),
                ));

Answer 2

首先，您需要了解，每当调用 setState（）方法时，它将仅重建Stateful Widget和State类的 build（）方法状态小部件的代码被执行。

在您的代码中，没有这种有状态的小部件可用，因此 setState（）方法没有用。

代码如下：

void main() => runApp(MaterialApp(
      title: "Hello",
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            "First App",
            style: TextStyle(
                color: Colors.white70,
                fontSize: 20,
                fontStyle: FontStyle.normal),
          ),
        ),
        body: MyAppWidgets(),
      ),
    )
);

class MyAppWidgets extends StatefulWidget {
  @override
  _MyAppWidgetsState createState() => _MyAppWidgetsState();
}

class _MyAppWidgetsState extends State<MyAppWidgets> {
  var textStrings = ["Hello", "Hi", "Hey", "Aloha"];
  var counter = 0;
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Padding(padding: EdgeInsets.only(top: 20)),
            Card(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Padding(padding: EdgeInsets.only(bottom: 20)),
                  Center(
                    child: Text("With Flutter, Spread Fluttery",
                        style: TextStyle(
                            color: Colors.redAccent,
                            fontStyle: FontStyle.italic,
                            fontSize: 30)),
                  ),
                  Padding(padding: EdgeInsets.only(bottom: 20)),
                  Icon(
                    Icons.refresh,
                    size: 50,
                    color: Colors.amberAccent,
                  ),
                  Padding(padding: EdgeInsets.only(bottom: 20)),
                  Text(textStrings[counter % 4],
                      style: TextStyle(
                          color: Colors.black38,
                          fontSize: 30,
                          fontStyle: FontStyle.normal)),
                  Padding(padding: EdgeInsets.only(bottom: 20)),
                  RaisedButton(
                    onPressed: () {
                      setState(() {
                        counter++;
                      });
                    },
                    child: Text("Enter",
                        style: TextStyle(
                          color: Colors.teal,
                          fontSize: 30,
                        )),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

Answer 3

我认为没有办法，因为runApp无法使用statefull小部件重绘。这只是您应用程序的起点。

只需在主要方法中更改应用程序的标题并使用热重装，它就不会重新出现在您的结果中，请使用播放按钮（运行按钮），它将起作用。

Flutter有状态的小部件-在单击按钮时保存状态的问题

3 个答案: