Flutter容器对齐比例异常问题排查求助

问题根源分析 #

1. 尺寸适配方法逻辑无效：AppLayout的getHeight和getWidth计算后返回值与传入像素一致，完全没实现屏幕适配，属于无效代码。
2. 底部容器未匹配TicketView尺寸规则：
   • TicketView宽度为屏幕宽度 * 0.85，同时右侧带16单位的margin
   • 底部蓝色容器直接继承ListView宽度，未设置对应宽度和边距，自然无法对齐
3. TicketScreen中定义的size变量未实际使用，属于冗余代码

修复步骤 #

1. 修复AppLayout适配方法 #

替换原有逻辑，实现基于设计稿的比例适配（示例以360x690为设计稿基准，可按需调整）：

class AppLayout {
  static getSize(BuildContext context) {
    return MediaQuery.of(context).size;
  }

  static getScreenHeight() {
    return Get.height;
  }

  static getScreenWidth() {
    return Get.width;
  }

  // 设计稿基准尺寸，根据你的设计图修改
  static const double _designHeight = 690;
  static const double _designWidth = 360;

  static getHeight(double pixels) {
    return (pixels / _designHeight) * getScreenHeight();
  }

  static getWidth(double pixels) {
    return (pixels / _designWidth) * getScreenWidth();
  }
}

2. 让底部容器与TicketView尺寸对齐 #

修改TicketScreen中的底部容器，复用TicketView的宽度和边距规则：

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

  @override
  Widget build(BuildContext context) {
    final size = AppLayout.getSize(context);
    // 复用TicketView的宽度规则
    final ticketViewWidth = size.width * 0.85;
    // 复用TicketView的右侧margin
    final ticketViewRightMargin = AppLayout.getHeight(16);
    
    return Scaffold(
      body: Stack(children: [
        ListView(
          padding: EdgeInsets.symmetric(
              horizontal: AppLayout.getHeight(20),
              vertical: AppLayout.getHeight(20)),
          children: [
            Gap(AppLayout.getHeight(40)),
            Text(
              'Tickets',
              style: Styles.headLineStyle,
            ),
            Gap(AppLayout.getHeight(20)),
            const AppTicketsTab(firstTab: 'Upcoming', secondTab: 'Previous'),
            Gap(AppLayout.getHeight(20)),
            Container(
              padding: EdgeInsets.only(left: AppLayout.getHeight(15)),
              child: TicketView(
                ticket: ticketList[0],
                isColor: true,
              ),
            ),
            // 修改后的底部容器
            Container(
              padding: EdgeInsets.only(left: AppLayout.getHeight(15)),
              width: ticketViewWidth,
              margin: EdgeInsets.only(right: ticketViewRightMargin),
              color: Colors.white, // 改为需求中的白色
              child: Column(
                children: [
                  Row(
                    children: [
                      Column(
                        children: [
                          Text(
                            'Flutter DB',
                            style: Styles.headLineStyle3,
                          ),
                          Gap(AppLayout.getHeight(5)),
                          Text(
                            'Passenger',
                            style: Styles.headLineStyle3,
                          ),
                        ],
                      )
                    ],
                  )
                ],
              ),
            )
          ],
        ),
      ]),
    );
  }
}

3. 可选：优化TicketView尺寸复用 #

将TicketView的宽度和边距抽为静态常量，避免重复计算：

class TicketView extends StatelessWidget {
  static const double widthRatio = 0.85;
  static const double rightMargin = 16;
  
  final Map<String, dynamic> ticket;
  final bool? isColor;
  const TicketView({
    Key? key,
    required this.ticket,
    this.isColor,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final size = AppLayout.getSize(context);
    return SizedBox(
      width: size.width * widthRatio,
      height: AppLayout.getHeight(169), // 无需区分平台，值一致
      child: Container(
        margin: EdgeInsets.only(right: AppLayout.getHeight(rightMargin)),
        // ... 原有代码
      ),
    );
  }
}

在TicketScreen中直接使用常量：

final ticketViewWidth = size.width * TicketView.widthRatio;
final ticketViewRightMargin = AppLayout.getHeight(TicketView.rightMargin);

关键说明 #

• 修复后的AppLayout会根据设计稿与实际屏幕的比例做适配，保证多设备显示一致
• 底部容器完全复用TicketView的尺寸规则，从根源上解决对齐问题
• 移除了冗余的平台判断，简化代码逻辑

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