Flutter应用横竖屏适配 横屏模式下build2自定义布局不显示问题求解

问题根因 #

• 你自定义的buildColumn横竖屏判断函数从未被调用，Flutter默认只会执行组件重写的build方法，所以永远只显示竖屏布局
• build和build2都返回独立的Scaffold组件，重复嵌套Scaffold会导致布局异常
• 原横屏布局未保留isShow状态控制逻辑，和竖屏逻辑不一致

修复后完整代码 #

import 'package:flutter/material.dart';

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

  @override
  _Screen2State createState() => _Screen2State();
}

class _Screen2State extends State<Screen2> {
  bool isShow = true;

  void simpleVoid() {
    setState(() {
      isShow = !isShow;
    });
  }

  @override
  Widget build(BuildContext context) {
    // 实时判断当前横竖屏状态
    final isPortrait = MediaQuery.of(context).size.height > MediaQuery.of(context).size.width;
    return Scaffold(
      // 根据横竖屏状态切换对应body布局
      body: isPortrait ? _buildPortraitBody() : _buildLandscapeBody(),
      // 悬浮按钮统一放在外层，横竖屏都可正常使用
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.shopping_cart),
        onPressed: simpleVoid,
      ),
    );
  }

  /// 竖屏布局（仅返回body内容，不嵌套Scaffold）
  Widget _buildPortraitBody() {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(45.0),
          child: Column(
            children: [
              Stack(
                children: <Widget>[
                  Container(
                    height: 700.0,
                    width: 600.0,
                    color: Colors.red,
                  ),
                  Column(
                    children: [
                      if (isShow)
                        Container(
                          height: 700.0,
                          width: 600.0,
                          color: Colors.blue,
                        ),
                    ],
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    );
  }

  /// 横屏布局（仅返回body内容，不嵌套Scaffold）
  Widget _buildLandscapeBody() {
    return Row(
      children: [
        Padding(
          padding: const EdgeInsets.all(45.0),
          child: Row(
            children: [
              Container(
                height: 300.0,
                width: 200.0,
                color: Colors.red,
              ),
              Row(
                children: [
                  if (isShow)
                    Container(
                      height: 300.0,
                      width: 200.0,
                      color: Colors.blue,
                    ),
                ],
              ),
            ],
          ),
        ),
      ],
    );
  }
}

额外适配建议 #

如果需要锁定应用横竖屏切换规则，可以在页面初始化时添加如下配置：

import 'package:flutter/services.dart';

@override
void initState() {
  super.initState();
  // 示例：允许横竖屏切换
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ]);
}

@override
void dispose() {
  // 页面销毁时恢复默认配置
  SystemChrome.setPreferredOrientations(DeviceOrientation.values);
  super.dispose();
}

内容的提问来源于stack exchange，提问作者Jian Yuan Ng