Flutter 颤振-单击一个升起按钮，所有升起按钮更新

我正在开发一个计算器类型的应用程序，它在屏幕上有很多按钮。当我打开dev工具检查重新绘制时，我注意到每当单击一个按钮时，屏幕上的每个按钮都会重新绘制。我没有在这里粘贴大量代码，而是创建了一个演示应用程序，显示我正在做什么。这是屏幕的外观：

每当按下任何按钮时，屏幕上的每个按钮都会重新绘制

这是我正在使用的代码：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Button Testing'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Text(
                buttonPressed,
                textAlign: TextAlign.center,
              ),
              SizedBox(
                height: 10.0,
              ),
              RaisedButton(
                child: Text('Button One'),
                onPressed: () {
                  setState(() {
                    buttonPressed = 'Button One Was Pressed';
                  });
                },
              ),
              RaisedButton(
                child: Text('Button Two'),
                onPressed: () {
                  setState(() {
                    buttonPressed = 'Button Two Was Pressed';
                  });
                },
              ),
              RaisedButton(
                child: Text('Button Three'),
                onPressed: () {
                  setState(() {
                    buttonPressed = 'Button Three Was Pressed';
                  });
                },
              ),
              RaisedButton(
                child: Text('Button Four'),
                onPressed: () {
                  setState(() {
                    buttonPressed = 'Button Four Was Pressed';
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }

@覆盖
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（“按钮测试”），
),
正文：中(
孩子：填充(
填充：常数边集全部（8.0），
子：列(
mainAxisAlignment:mainAxisAlignment.center，
crossAxisAlignment:crossAxisAlignment.stretch，
儿童：[
正文(
按下按钮，
textAlign:textAlign.center，
),
大小盒子(
身高：10.0，
),
升起的按钮(
子项：文本（“按钮一”），
已按下：（）{
设置状态（）{
buttonPressed='按钮一已按下'；
});
},
),
升起的按钮(
子项：文本（“按钮二”），
已按下：（）{
设置状态（）{
buttonPressed='按钮2已按下'；
});
},
),
升起的按钮(
子项：文本（“按钮三”），
已按下：（）{
设置状态（）{
按钮按下='按钮三按下'；
});
},
),
升起的按钮(
子项：文本（“按钮四”），
已按下：（）{
设置状态（）{
按钮按下='按钮四按下'；
});
},
),
],
),
),
),
);
}

---

我试着将按钮区域拆分成一个单独的小部件，但我所做的一切都无关紧要。我的问题是，还有什么我应该做的吗？这是预期的和可接受的行为吗？无论何时点击任何按钮，都会重新绘制，这有关系吗？我认为在Flatter中，只需要重新绘制需要重新绘制的内容。

无论何时调用setState，它都会重新生成整个构建方法，因此很明显，它会重新生成RaisedButton

您可以通过使用提供者、Bloc等来避免这种情况，因为它们不会重建整个构建方法。它只会更改数据

这完全取决于你是否愿意接受它。根据我的说法，若小部件并没有那个么大，你们可以保留它

---

每次重新绘制小部件都不是很好的做法，但是如果它不是很频繁地重建，或者您的应用程序没有那么大，那么就可以了。

setState

将重建所有屏幕

---

因此，您可以通过使用Bloc来避免这种情况，它是一个状态控制器，不会重建所有内容，只重建您需要重建的内容。您可以从头开始使用它，或者使用插件

Bloc 1.0.0

它对于这样一个基本布局来说是正常和可接受的。如果您需要更复杂的屏幕，请选择网络调用、嵌套层次结构等。。然后考虑使用提供者、BUC体系结构只重画需要重新绘制的东西。