更改 parent 的 child 小部件 |扑

Question

我已经到了必须在我的应用程序中处理状态管理的地步，即使当我通过与我的标题相似的问题时才开始了解它。

我想通过为我的以下代码提供一个干净的解决方案来学习状态管理和包括的东西：

这是我的 Parent 小部件。但是我不想传递来自 SideMenu 的数据来管理 WidgetDependingOnSideMenu 小部件。要清楚：当我在 SideMenu class 上按下 SideMenuItem 时，child（在我的 MainScreen 中的第二个 Expanded）应该更改为 SideMenuItem（onClick 函数）给出的另一个。

class MainScreen extends StatelessWidget {
  // final GlobalKey<SideMenuState> _key = GlobalKey();

  @override
  Widget build(BuildContext context) {
    Size _size = MediaQuery.of(context).size;
    return Scaffold(
      body: Responsive(
        desktop: Row(
          children: [
            Expanded(flex: _size.width > 1340 ? 2 : 4, child: SideMenu()),
            Expanded(
                flex: _size.width > 1340 ? 3 : 5, child: WidgetDependingOnSideMenu()),
            Expanded(flex: _size.width > 1340 ? 8 : 10, child: Container()),
          ],
        ),
      ),
    );
  }
}

这是我的 SideMenuItem。单击 SideMenuItem 时调用函数 toggleActiveState。如前所述，此时 parent 应该收到它必须更改 class.

中的一些 child 的信息

            SideMenuItem(
                icon: Icon(
                  Icons.inbox,
                  size: 20,
                  color: isActiveList[0] ? kPrimaryColor : kGrayColor,
                ),
                activeState: isActive,
                textColor: isActiveList[0] ? kTextColor : kGrayColor,
                title: "Bestellungen",
                toggleActiveState: (activeState) {
                  clearIsActiveList();
                  setState(() {
                    isActiveList[0] = !activeState;
                  });
                }),

好吧，我希望我能通过一个干净的解决方案来进入那个话题。如果您需要更多信息，请告诉我。今天就够了，祝你有个愉快的夜晚。谢谢

Answer 1

我通过以下视频找到了解决问题的方法： https://www.youtube.com/watch?v=A1qu8X7f36k

首先我使用了 Provider 包： https://pub.dev/packages/provider

然后我在 SideMenu 中使用 ChangeNotifier 创建了以下 class：

class ActiveWidgetNotifier extends ChangeNotifier {
  Widget activeWidget = Bestellungen();
  void changeActiveWidget(Widget newWidget) {
    activeWidget = newWidget;
    notifyListeners();
  }
}

在按钮处按下：

Provider.of<ActiveWidgetNotifier>(context, listen: false)
                      .changeActiveWidget(NewWidgetThatShouldBeDisplayed());

然后我在父级添加了以下代码以显示更改后的子级：

            Expanded(
                flex: 3,
                child: Provider.of<ActiveWidgetNotifier>(context).activeWidget),

终于在我的 main.dart 添加了 ChangeNotifierProvider:

void main() {
  runApp(ChangeNotifierProvider(
      create: (_) => ActiveWidgetNotifier(), child: App()));
}

您只需重新启动应用程序即可避免错误。这对我有用。

更改 parent 的 child 小部件 |扑

Change child widget of parent | Flutter

state

callback

flutter