如何动态计算屏幕高度并按比例适配带固定边距的多视图布局？

嘿，这个需求其实很好实现，核心就是先拿到屏幕的可用布局高度，再按照你的比例规则分配给各个视图就行。我给你分几个常见的移动开发平台来具体说明，你可以对应自己的技术栈参考：

不管用什么平台，步骤都是一致的：

• 先获取应用的可用屏幕高度（要减去系统状态栏、导航栏/安全区域这些系统UI的高度）
• 减去上下padding的总和（10*2=20），得到真正可以用来分配的布局高度
• 首个banner视图占这个可分配高度的1/3
• 剩下的高度平均分给3个视图，也就是每个占剩余高度的1/3

在Flutter里有两种实用方案：

方案1：动态计算具体高度 #

用MediaQuery获取屏幕信息后手动计算：

import 'package:flutter/material.dart';

class DynamicLayoutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 获取当前上下文的媒体查询数据
    final mediaQuery = MediaQuery.of(context);
    // 计算应用可用高度（减去状态栏、底部导航栏的高度）
    final availableHeight = mediaQuery.size.height 
        - mediaQuery.padding.top 
        - mediaQuery.padding.bottom;
    // 减去上下padding后的可分配高度
    final usableHeight = availableHeight - 20;
    // 计算各视图高度
    final bannerHeight = usableHeight / 3;
    final itemHeight = (usableHeight - bannerHeight) / 3;

    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.only(top: 10, bottom: 10),
        child: Column(
          children: [
            // Banner视图
            Container(
              height: bannerHeight,
              color: Colors.blueAccent,
              child: const Center(child: Text('Banner', style: TextStyle(color: Colors.white))),
            ),
            // 三个均分视图
            Container(
              height: itemHeight,
              color: Colors.orange,
              child: const Center(child: Text('Item 1')),
            ),
            Container(
              height: itemHeight,
              color: Colors.green,
              child: const Center(child: Text('Item 2')),
            ),
            Container(
              height: itemHeight,
              color: Colors.purple,
              child: const Center(child: Text('Item 3')),
            ),
          ],
        ),
      ),
    );
  }
}

方案2：用Flex布局自动分配比例 #

这种方案不需要手动计算，靠Expanded的flex属性实现比例适配：

// 仅展示核心布局部分
Padding(
  padding: const EdgeInsets.only(top: 10, bottom: 10),
  child: Column(
    children: [
      // Banner占1份，剩余三个各占2份（总份数9，banner占3/9=1/3，每个item占2/9=剩余2/3的1/3）
      Expanded(
        flex: 3,
        child: Container(color: Colors.blueAccent, child: const Center(child: Text('Banner'))),
      ),
      Expanded(
        flex: 2,
        child: Container(color: Colors.orange, child: const Center(child: Text('Item 1'))),
      ),
      Expanded(
        flex: 2,
        child: Container(color: Colors.green, child: const Center(child: Text('Item 2'))),
      ),
      Expanded(
        flex: 2,
        child: Container(color: Colors.purple, child: const Center(child: Text('Item 3'))),
      ),
    ],
  ),
)

方案1：用LinearLayout的weight属性（最简便） #

直接在XML里配置比例，不用写代码计算：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingTop="10dp"
    android:paddingBottom="10dp">

    <!-- Banner视图：占总可分配高度的1/3 -->
    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:background="@color/blue" />

    <!-- 三个均分视图：各占剩余高度的1/3 -->
    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:background="@color/orange" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:background="@color/green" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:background="@color/purple" />

</LinearLayout>

方案2：代码动态计算高度 #

如果需要手动控制高度，可以在Activity里计算：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    // 获取屏幕可用高度（减去状态栏、导航栏）
    val displayMetrics = resources.displayMetrics
    val screenHeight = displayMetrics.heightPixels
    val statusBarHeight = resources.getDimensionPixelSize(R.dimen.status_bar_height)
    val navigationBarHeight = resources.getDimensionPixelSize(R.dimen.navigation_bar_height)
    val availableHeight = screenHeight - statusBarHeight - navigationBarHeight

    // 转换dp为像素（避免硬编码像素值）
    val paddingValue = TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        10f,
        displayMetrics
    ).toInt()
    val usableHeight = availableHeight - paddingValue * 2

    // 计算各视图高度
    val bannerHeight = usableHeight / 3
    val itemHeight = (usableHeight - bannerHeight) / 3

    // 设置banner高度（其他视图同理）
    val bannerView = findViewById<View>(R.id.banner)
    val layoutParams = bannerView.layoutParams as LinearLayout.LayoutParams
    layoutParams.height = bannerHeight
    bannerView.layoutParams = layoutParams
}

方案1：用AutoLayout手动计算高度 #

import UIKit

class DynamicLayoutVC: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        setupViews()
    }

    private func setupViews() {
        // 创建视图
        let bannerView = UIView()
        bannerView.backgroundColor = .blue
        let item1 = UIView()
        item1.backgroundColor = .orange
        let item2 = UIView()
        item2.backgroundColor = .green
        let item3 = UIView()
        item3.backgroundColor = .purple

        // 添加到父视图并禁用自动约束
        [bannerView, item1, item2, item3].forEach {
            $0.translatesAutoresizingMaskIntoConstraints = false
            view.addSubview($0)
        }

        // 获取安全区域可用高度
        let safeAreaHeight = view.safeAreaLayoutGuide.layoutFrame.height
        let padding: CGFloat = 10
        let usableHeight = safeAreaHeight - padding * 2
        let bannerHeight = usableHeight / 3
        let itemHeight = (usableHeight - bannerHeight) / 3

        // 设置约束
        NSLayoutConstraint.activate([
            bannerView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: padding),
            bannerView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            bannerView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            bannerView.heightAnchor.constraint(equalToConstant: bannerHeight),

            item1.topAnchor.constraint(equalTo: bannerView.bottomAnchor),
            item1.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            item1.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            item1.heightAnchor.constraint(equalToConstant: itemHeight),

            item2.topAnchor.constraint(equalTo: item1.bottomAnchor),
            item2.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            item2.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            item2.heightAnchor.constraint(equalToConstant: itemHeight),

            item3.topAnchor.constraint(equalTo: item2.bottomAnchor),
            item3.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            item3.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            item3.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -padding),
            item3.heightAnchor.constraint(equalToConstant: itemHeight)
        ])
    }
}

方案2：用UIStackView实现比例布局 #

private func setupWithStackView() {
    let bannerView = UIView()
    bannerView.backgroundColor = .blue
    let item1 = UIView()
    item1.backgroundColor = .orange
    let item2 = UIView()
    item2.backgroundColor = .green
    let item3 = UIView()
    item3.backgroundColor = .purple

    let stackView = UIStackView(arrangedSubviews: [bannerView, item1, item2, item3])
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.axis = .vertical
    stackView.distribution = .fillProportionally
    view.addSubview(stackView)

    // 设置stackView的边距
    NSLayoutConstraint.activate([
        stackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 10),
        stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        stackView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -10)
    ])

    // 设置比例约束
    bannerView.heightAnchor.constraint(equalTo: stackView.heightAnchor, multiplier: 1/3).isActive = true
    item1.heightAnchor.constraint(equalTo: stackView.heightAnchor, multiplier: 2/9).isActive = true
    item2.heightAnchor.constraint(equalTo: stackView.heightAnchor, multiplier: 2/9).isActive = true
    item3.heightAnchor.constraint(equalTo: stackView.heightAnchor, multiplier: 2/9).isActive = true
}

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