如果热重新加载页面，设置状态不会改变值

Question

我有以下情况

Column(
  children: [
    Tabs(),
    getPage(),
], 
),

getPage 方法

   Widget getPage() {
      if (tab1IsSelected == true) {
        return Container(
          child: Center(
            child: Text('Tab1'),
          ),
        );
      }
      if (tab1IsSelected == false) {
        return Container(
          child: Center(
            child: Text('Tab2'),
          ),
        );
      }
    }

并且在全局范围内我已经声明了一个变量

bool tab1IsSelected = true;

在选项卡类（有状态）中：

class Tabs extends StatefulWidget {
  @override
  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: GestureDetector(
            onTap: () {
              setState(() {
                tab1IsSelected = true;
              });
            },
            child: Container(
              decoration: BoxDecoration(
                color: tab1IsSelected ? primary : second,
              ),
              child: Padding(
                padding:
                    EdgeInsets.only(top: 1.5 * SizeConfig.heightMultiplier),
                child: Center(
                  child: Text(
                    'New Hunt',
                    style: Theme.of(context).textTheme.bodyText1,
                  ),
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: GestureDetector(
            onTap: () {
              setState(() {
                tab1IsSelected = false;
              });
            },
            child: Container(
              decoration: BoxDecoration(
                color: tab1IsSelected ? second : primary,
              ),
              child: Padding(
                padding:
                    EdgeInsets.only(top: 1.5 * SizeConfig.heightMultiplier),
                child: Center(
                  child: Text(
                    'My Hunts',
                    style: Theme.of(context).textTheme.bodyText2,
                  ),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

我更改了那个 bool 的值，但只有当我热重新加载页面时，内容才会发生变化。 为什么？ 你能指导我吗？

我试过用 ? ：在该列中，但结果相同，如果我在列所在的主类中声明该变量，则无法在 Tabs 类中访问它，所以这就是我全局声明它的原因，也许这就是我必须热的原因重新加载，但我如何实现它来做我想做的事。 先感谢您

Answer 1

setState 位于_TabsState因此它只会影响/重建该特定小部件，而不是getPage() ，您可以尝试使用ValueChanged<bool>来检索新值，然后在包装getPage()的小部件中使用 setState

class Tabs extends StatefulWidget {
  final ValueChanged<bool> onChanged;

  Tabs({this.onChanged});


  @override
  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: GestureDetector(
            onTap: () => widget.onChanged(true), //pass the value to the onChanged
            child: Container(
              decoration: BoxDecoration(
                color: tab1IsSelected ? primary : second,
              ),
              child: Padding(
                padding:
                    EdgeInsets.only(top: 1.5 * SizeConfig.heightMultiplier),
                child: Center(
                  child: Text(
                    'New Hunt',
                    style: Theme.of(context).textTheme.bodyText1,
                  ),
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: GestureDetector(
            onTap: () => widget.onChanged(false), //pass the value to the onChanged
            child: Container(
              decoration: BoxDecoration(
                color: tab1IsSelected ? second : primary,
              ),
              child: Padding(
                padding:
                    EdgeInsets.only(top: 1.5 * SizeConfig.heightMultiplier),
                child: Center(
                  child: Text(
                    'My Hunts',
                    style: Theme.of(context).textTheme.bodyText2,
                  ),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

现在在带有列的小部件上（这应该是一个 StatefulWidget 以便 setState 工作）

Column(
  children: [
    Tabs(
      onChanged: (bool value) => setState(() => tab1IsSelected = value);
    ),
    getPage(),
  ], 
),

每次更改tab1IsSelected的值时，它都会更新getPage()

Answer 2

如果您想在状态发生变化时重建小部件，您需要调用小部件的 setState() 。 该变量引用了 State 类，当您调用 setState() 时，Flutter 将通过调用 State 类的 build() 方法重建小部件本身。

如果您想在小部件之外拥有一些变量，我建议您使用此处列出的状态管理方法： https : //flutter.dev/docs/development/data-and-backend/state-mgmt/options 。

例如，您可以使用 Provider 来存储活动选项卡并在两个小部件中引用 provider 变量。

Answer 3

您可以尝试在持有 Tab Widget 的父类中处理 setstate，然后将函数传递给 tab 类并在手势检测器中执行它。