Flutter：通过onPressed触发LargeView重建以切换侧边菜单

你的核心问题是全局变量sideMenuOpen的变化无法触发LargeView的UI重建——Flutter框架不会自动监听全局变量的改动，只有通过官方认可的状态更新机制（如setState、状态管理库），才会通知组件重新执行build方法。

方案1：将状态移到LargeView的State内部（最基础方案） #

把sideMenuOpen和切换逻辑放到_LargeViewState里，用setState包裹状态修改，触发UI重建：

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

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

class _LargeViewState extends State<LargeView> {
  // 状态变量移到State内部
  bool sideMenuOpen = false;

  void toggleSideMenu() {
    // 用setState通知框架更新UI
    setState(() {
      sideMenuOpen = !sideMenuOpen;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: SizedBox(
            // 可选：根据状态动态调整侧边栏宽度，匹配菜单组件
            width: sideMenuOpen ? 200 : 100,
            child: sideMenuOpen ? SideMenu() : SmallSideMenu(),
          ),
        ),
        Expanded(
          flex: 10,
          child: Container(
            width: double.infinity,
            padding: const EdgeInsets.all(20.0),
            color: greyColor,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(15.0),
              ),
              child: localNavigator(),
            ),
          ),
        ),
        // 如果按钮在侧边栏内，直接调用toggleSideMenu
        IconButton(
          onPressed: toggleSideMenu,
          icon: HeroIcon(HeroIcons.arrowNarrowRight, size: 16.0),
        )
      ],
    );
  }
}

方案2：按钮不在LargeView内部时（跨组件状态传递） #

如果切换按钮在LargeView之外（比如AppBar），可以通过回调函数将状态变化传递给父组件，再把状态作为参数传给LargeView：

// 父页面组件
class ParentPage extends StatefulWidget {
  const ParentPage({Key? key}) : super(key: key);

  @override
  State<ParentPage> createState() => _ParentPageState();
}

class _ParentPageState extends State<ParentPage> {
  bool sideMenuOpen = false;

  void toggleSideMenu() {
    setState(() {
      sideMenuOpen = !sideMenuOpen;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          // 按钮在AppBar中，调用父组件的toggle方法
          IconButton(
            onPressed: toggleSideMenu,
            icon: HeroIcon(HeroIcons.arrowNarrowRight, size: 16.0),
          ),
        ],
      ),
      body: LargeView(sideMenuOpen: sideMenuOpen),
    );
  }
}

// 修改LargeView为无状态组件，接收外部状态
class LargeView extends StatelessWidget {
  final bool sideMenuOpen;

  const LargeView({
    Key? key,
    required this.sideMenuOpen,
  }) : super(key: key);

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

效果对比 #

当前未切换状态：

预期切换后状态：

内容的提问来源于stack exchange，提问作者leonms