值更改时如何在 Flutter 上重绘小部件？

Question

假设以下简单的StatefulWidget 示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  int value = 0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('App Example')),
        body: Row(children:[
          Text("hello"), 
          RaisedButton(
            textColor: Colors.white,
            color: Colors.blue,
            onPressed: (){setState(() { value+=1; });},
            child: new Text("Add"),
          )
        ]),
      ),
    );
  }
}

我的主要问题是：每次value 更改时如何重绘Text("hello")？我以Text 为例，但它可能是一个具有内部状态的小部件，我想在值更改时重新绘制它。它不一定取决于value，但我想在value 更改时重绘。

Answer 1

我对它没有太多想法。我通过将它包装到一个容器中并将高度和宽度设置为某个变量来做这种事情。

Answer 2

如果您的问题是您是否只想更改特定小部件的状态（例如 Text 小部件）而不干扰其他小部件。 This 是一些状态管理，除了 SetState（我个人最喜欢的 BLOC 和 REDUx）之外可能会有所帮助。

Answer 3

更新这一行：- 文本（“你好 ${value}”），

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  int value = 0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('App Example')),
        body: Center(
          child: Column(children: [
            Text("hello ${value}"),
            RaisedButton(
              textColor: Colors.white,
              color: Colors.blue,
              onPressed: () {
                setState(() {
                  value += 1;
                });
              },
              child: new Text("Add"),
            )
          ]),
        ),
      ),
    );
  }
}