Flutter横竖屏场景下实现视图响应式适配的问题求助

核心问题原因 #

你当前布局适配异常的核心原因是使用了固定像素值设置边距、组件尺寸，不同设备的屏幕分辨率、宽高比差异以及横竖屏切换都会导致固定值无法匹配实际可用空间，最终出现元素偏移、错位问题。 #

具体适配方案 #

1. 替换固定边距为相对定位 #

放弃硬编码的EdgeInsets.fromLTRB固定边距，使用Positioned组件直接锚定元素在Stack中的相对位置：

• 退出登录按钮直接锚定到Stack右上角，仅设置距离顶部、右侧的安全边距即可
• 居中图片靠Alignment调整相对位置，不要用固定margin值实现偏移

2. 组件尺寸采用相对比例 #

不要写死宽高数值，基于当前屏幕的宽高/短边比例设置尺寸，适配不同设备：

• 图片尺寸可设置为屏幕短边的20%~30%，横竖屏切换时会自动适配缩放
• 图标尺寸也可以按比例设置，避免小屏设备显示过大

3. 适配系统安全区 #

通过MediaQuery.of(context).padding获取状态栏、刘海屏、底部手势条的高度，避免元素被系统UI遮挡。

4. 可选：横竖屏差异化适配 #

如果需要横竖屏展示效果有差异，可以用OrientationBuilder判断当前屏幕方向，针对性调整尺寸、边距参数。 #

修改后完整代码 #

import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:toast/toast.dart';

import 'CurvedPainter.dart';

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

class Profile extends StatelessWidget {
  const Profile({Key? key}) : super(key: key);

  static const String _title = 'Profile';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulProfile(),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  @override
  State<StatefulWidget> createState() => MyProfileState();
}

class MyProfileState extends State<MyStatefulProfile> {
  void logout() {
    // 原有退出逻辑保留
    print('Logout Clicked');
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final padding = MediaQuery.of(context).padding;
    // 取屏幕短边的25%作为图片尺寸
    final logoSize = size.shortestSide * 0.25;

    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: [
          // 背景层
          Container(
            decoration: const BoxDecoration(
              color: Color(0xFFFFD700),
            ),
            child: CustomPaint(
              size: size,
              painter: CurvedPainter(),
            ),
          ),
          // 右上角退出按钮，相对定位
          Positioned(
            top: padding.top + 16, // 避开状态栏，再加16dp边距
            right: 16,
            child: InkWell(
              onTap: logout,
              child: const Icon(
                Icons.logout,
                color: Colors.black,
                size: 28,
              ),
            ),
          ),
          // 居中Logo，向上偏移自身高度的1倍
          Align(
            alignment: const Alignment(0, -0.3), // 相对居中位置向上偏移，数值范围-1~1
            child: Container(
              height: logoSize,
              width: logoSize,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: const AssetImage('assets/images/ic_logo_main.png'),
                  fit: BoxFit.cover,
                ),
                shape: BoxShape.rectangle,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

额外优化建议 #

• 自定义绘制CurvedPainter内部也需要使用相对比例计算绘制坐标，不要用固定像素值，避免背景曲线错位
• 如果需要更精细的多设备适配，可以引入flutter_screenutil等适配库，统一按设计稿比例转换尺寸

内容的提问来源于stack exchange，提问作者Nikhil S Marathe