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。