Flutter onPressed 触发另一个小部件的 State

Question

我需要 flutter 构建管理方面的帮助。 我的目标是使用 SmallSideMenu() 或相反的 SideMenu() 重建我的侧边导航栏。

您知道如何触发我的 LargeView 小部件的构建过程，以便使用相应的 SideMenu 重建它吗？

按钮定义如下：

IconButton(
            onPressed: () {
              checkState();
            },
            icon: HeroIcon(
              HeroIcons.arrowNarrowRight,
              size: 16.0,
            ),
          ),

sideMenuOpen 变量和 function 的值是全局设置的；

checkState() {
  if (sideMenuOpen == true) {
   sideMenuOpen = false;
   } else {
     sideMenuOpen = true;
   }
 }

SideMenu 在这里定义。

class LargeView extends StatefulWidget {
  const LargeView({
    Key? key,
  }) : super(key: key);

  @override
  State<LargeView> createState() => _LargeViewState();
}

class _LargeViewState extends State<LargeView> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: SizedBox(
            width: 100,
            child: sideMenuOpen ? SideMenu() : SmallSideMenu(),
          ),
        ),
        Expanded(
          flex: 10,
          child: Container(
            width: double.infinity,
            padding: const EdgeInsets.all(20.0),
            color: greyColor,
            child: Expanded(
                child: Container(
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(15.0)),
                    child: localNavigator())),
          ),
        )
      ],
    );
  }
}

Answer 1

您可以使用ValueNotifier而不是单个布尔值。 并且要更新 UI，它可以在ValueListenableBuilder上使用。

final ValueNotifier<bool> sideMenuOpen = ValueNotifier(false);

和

child: SizedBox(
  width: 100,
  child: ValueListenableBuilder<bool>(
    valueListenable: sideMenuOpen,
    builder: (context, value, child) => value
        ? SideMenu(),
        : SmallSideMenu(),
  ),
),

并改变价值

sideMenuOpen.value = true;

Answer 2

在有状态小部件中制作 sideMenuOpen 一个 state 并使用 setState 作为

checkState() {
  if (sideMenuOpen == true) {
setState((){
sideMenuOpen = false;
});

   } else {
     setState((){
sideMenuOpen = true;
});
   }
 }

如果您想全局保留导航栏的 state（打开/关闭），请使用一些 state 管理，例如提供程序，而不是使用全局 function。