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

标签 dart flutter state

以下是一个简单的代码(在 ma​​in.dart 中),我试图用它来重温几个月前我正在做的 flutter 基础知识。

这里,在下面的代码中,setState() 没有按预期工作,原因是状态错误。

我可以通过创建单独的 statefulwidget withs 状态来使它可用,这些状态构成以下用于按钮和文本更改的元素。

但在这里我想知道是否可以通过对以下代码进行最少的更改来匿名完成此操作

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,
                            )),
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    ));

最佳答案

当然你可以添加几行代码,你可以使用StatefulBuilder

将容器包装在 StatefulBuilder 中,并在按钮的 onPressed 方法中更改 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: 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,
                                              )),
                                        )
                                      ],
                                    ),
                                  )
                                ],
                              ),
                            ),
                          );
                        },
                      )),
                ));

关于dart - Flutter 有状态小部件 - 单击按钮时保存状态的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53927341/

相关文章:

javascript - 无法使用来自 Angular2 Dart 应用程序的 CSS(CSS 垫片)

dart - 从 DropdownButtonFormField 中删除下划线

dart - 渲染图像下方的可滚动列表

android - 如何改变单选按钮的半径

javascript - React JS 对象集合的状态更新

angular - dart angular2 - 在模板中渲染对象时出现空错误

android - Flutter 有状态小部件,其子级未更新状态

uml - 状态图中的转换顺序是什么?如何使用历史伪状态?

javascript - ReactJS - setState Axios POST 响应

flutter - 如何在 flutter 中使用下拉选择创建表单模式