Flutter技术需求：点击相机Tab隐藏AppBar和TabBar，实现全屏相机

要实现点击相机Tab时隐藏AppBar、TabBar并让CameraScreen全屏显示，可按以下步骤修改代码：

1. 主页面监听Tab切换，动态控制AppBar和TabBar #

假设你的主页面使用TabController管理Tab切换，添加监听逻辑来控制顶部栏的显示：

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  bool _showTopBars = true;

  @override
  void initState() {
    super.initState();
    // 假设相机Tab是第3个（索引为2），根据实际Tab数量调整length
    _tabController = TabController(length: 3, vsync: this);
    _tabController.addListener(() {
      setState(() {
        // 切换到相机Tab时隐藏顶部栏，其他Tab显示
        _showTopBars = _tabController.index != 2;
      });
    });
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _showTopBars 
          ? AppBar(
              title: const Text("WhatsApp Clone"),
              bottom: TabBar(
                controller: _tabController,
                tabs: const [
                  Tab(icon: Icon(Icons.chat)),
                  Tab(icon: Icon(Icons.status)),
                  Tab(icon: Icon(Icons.camera_alt)),
                ],
              ),
            )
          : null,
      body: TabBarView(
        controller: _tabController,
        children: [
          const ChatScreen(),
          const StatusScreen(),
          CameraScreen(), // 你的相机页面
        ],
      ),
    );
  }
}

2. 改造CameraScreen实现全屏效果 #

修改相机页面的代码，添加系统UI控制，隐藏状态栏和导航栏：

import 'package:flutter/services.dart'; // 导入系统UI控制包

class _CameraScreenState extends State<CameraScreen> {
  CameraController? _cameraController;
  Future<void>? cameravalue;
  bool isrecording = false;
  bool flash = false;
  bool isCameraFront = false;
  double trasform = 0;

  @override
  void initState() {
    super.initState();
    _cameraController = CameraController(camera![0], ResolutionPreset.high);
    cameravalue = _cameraController!.initialize();
    // 进入相机页面时隐藏状态栏和导航栏
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
  }

  @override
  void dispose() {
    _cameraController!.dispose();
    // 离开相机页面时恢复系统UI
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black, // 设为黑色避免空隙
      body: Stack(
        children: [
          FutureBuilder(
            future: cameravalue,
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                return CameraPreview(_cameraController!);
              } else {
                return const Center(child: CircularProgressIndicator());
              }
            },
          ),
          // 底部控制栏（保留你原有的代码）
          Positioned(
            bottom: 0,
            child: Container(
              padding: const EdgeInsets.only(top: 5, bottom: 5),
              color: Colors.black,
              width: MediaQuery.of(context).size.width,
              child: Column(
                children: [
                  Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      IconButton(
                        onPressed: () {
                          setState(() => flash = !flash);
                          flash
                              ? _cameraController!.setFlashMode(FlashMode.torch)
                              : _cameraController!.setFlashMode(FlashMode.off);
                        },
                        icon: Icon(flash ? Icons.flash_on : Icons.flash_off, color: Colors.white, size: 28),
                      ),
                      GestureDetector(
                        onLongPress: () async {
                          await _cameraController!.startVideoRecording();
                          setState(() => isrecording = true);
                        },
                        onLongPressUp: () async {
                          XFile videopath = await _cameraController!.stopVideoRecording();
                          setState(() => isrecording = false);
                          Navigator.push(context, MaterialPageRoute(builder: (builder) => VideoView(path: videopath.path)));
                        },
                        onTap: () => !isrecording ? takePhoto(context) : null,
                        child: isrecording
                            ? const Icon(Icons.radio_button_on, color: Colors.red, size: 80)
                            : const Icon(Icons.panorama_fish_eye, color: Colors.white, size: 70),
                      ),
                      IconButton(
                        onPressed: () async {
                          setState(() {
                            isCameraFront = !isCameraFront;
                            trasform += pi;
                          });
                          int cameraPos = isCameraFront ? 0 : 1;
                          _cameraController = CameraController(camera![cameraPos], ResolutionPreset.high);
                          cameravalue = _cameraController!.initialize();
                        },
                        icon: Transform.rotate(
                          angle: trasform,
                          child: const Icon(Icons.flip_camera_ios, color: Colors.white, size: 30),
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 4),
                  const Text('Hold for Video, tap for photo', style: TextStyle(color: Colors.white), textAlign: TextAlign.center),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

  void takePhoto(BuildContext context) async {
    final path = join((await getTemporaryDirectory()).path, "${DateTime.now()}.png");
    XFile picture = await _cameraController!.takePicture();
    picture.saveTo(path);
    Navigator.push(context, MaterialPageRoute(builder: (context) => CameraView(path: path)));
  }
}

3. 优化Tab切换时的系统UI状态（可选） #

如果切换Tab时需要同步系统UI状态，可在主页面的Tab监听中补充：

_tabController.addListener(() {
  setState(() => _showTopBars = _tabController.index != 2);
  if (_tabController.index == 2) {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
  } else {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  }
});

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