Flutter如何通过复选框编程实现导航栏（AppBar）隐藏？

当然可以，这是Flutter里很常见的交互需求，核心思路是用状态变量控制AppBar的显示状态，再通过Checkbox的回调来更新这个变量。

实现步骤： #

• 使用StatefulWidget（因为需要动态更新UI状态）
• 定义布尔类型的状态变量_showAppBar，初始值设为true（默认显示AppBar）
• 在Scaffold的appBar属性中，根据_showAppBar的值决定返回AppBar实例还是null
• 添加Checkbox组件，在onChanged回调里调用setState更新_showAppBar的值

完整示例代码： #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AppBar Toggle Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const AppBarTogglePage(),
    );
  }
}

class AppBarTogglePage extends StatefulWidget {
  const AppBarTogglePage({super.key});

  @override
  State<AppBarTogglePage> createState() => _AppBarTogglePageState();
}

class _AppBarTogglePageState extends State<AppBarTogglePage> {
  // 控制AppBar显示的状态变量
  bool _showAppBar = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 根据状态变量决定是否显示AppBar
      appBar: _showAppBar
          ? AppBar(
              title: const Text('可隐藏的导航栏'),
            )
          : null,
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Row(
          children: [
            Checkbox(
              value: _showAppBar,
              // 勾选状态改变时更新变量
              onChanged: (bool? newValue) {
                setState(() {
                  _showAppBar = newValue ?? true;
                });
              },
            ),
            const Text('显示导航栏'),
          ],
        ),
      ),
    );
  }
}

关键说明： #

• setState是Flutter更新UI的核心方法，调用它会触发Widget重建，从而更新AppBar的显示状态
• 当appBar设为null时，Scaffold会自动占据原本AppBar的空间，页面内容会顶到屏幕顶部
• Checkbox的onChanged回调中，newValue可能为null，用?? true做默认值处理可避免空指针问题

内容的提问来源于stack exchange，提问作者Dilawar Ali Khan