SwiftUI中如何让VStack子视图底部文本对齐且长文本不被截断

问题描述 #

我编写了如下SwiftUI代码，运行后得到对应输出：

var body: some View {
    VStack(spacing: 0) {
        HStack(spacing: 0) {
            Rectangle()
                .fill(Color.green)
                .overlay(
                    VStack {
                        Text("11 / 11 /11 /111/1 111")
                           .font(.system(size: 100.0))
                        Text("data")
                    }
                )
            
            Rectangle()
                .fill(Color.red)
                .overlay(
                    VStack {
                        Text("111 / 111")
                           .font(.system(size: 100.0))
                        Text("data 2")
                    }
                )
        }
    }
}

当前运行效果：

现在的问题是：左侧绿色矩形中上方的长文本高度更高，导致其下方的data文本位置比右侧红色矩形下方的data 2更低，二者无法对齐。我不希望长文本"11 / 11 /11 /111/1 111"被截断，也可以接受该长文本的字体大小小于下方文本的字体大小，我已经尝试过使用minimumScaleFactor，但底部文本仍然会被上方的长文本挤压错位。
我想要实现的最终效果如下图所示：

请问应该如何实现该需求？

解决方案 #

核心思路是固定底部文本的位置，让顶部文本自适应调整，不会挤压底部布局：

1. 先让左右两个矩形平分父容器宽度，且自动保持等高
2. 每个矩形的内容区域占满整个矩形高度，用占位控件把底部文本固定在矩形底部，避免受上方文本高度影响
3. 给顶部文本添加自适应缩放规则，保证不截断的前提下适配容器宽度

以下是修改后的完整代码：

var body: some View {
    VStack(spacing: 0) {
        HStack(spacing: 0) {
            Rectangle()
                .fill(Color.green)
                .frame(maxWidth: .infinity) // 平分父容器宽度
                .overlay(
                    VStack(spacing: 8) { // 可自定义上下文本的间距
                        Text("11 / 11 /11 /111/1 111")
                            .font(.system(size: 100.0))
                            .lineLimit(1) // 单行显示不换行，允许换行可删掉此行
                            .minimumScaleFactor(0.1) // 最小可缩放到原尺寸的10%，可按需调整
                        Spacer() // 把底部文本顶到矩形最下方
                        Text("data")
                    }
                    .frame(maxHeight: .infinity) // 内容占满整个矩形高度
                    .padding() // 可选，避免文本贴边
                )
            
            Rectangle()
                .fill(Color.red)
                .frame(maxWidth: .infinity) // 平分父容器宽度
                .overlay(
                    VStack(spacing: 8) {
                        Text("111 / 111")
                            .font(.system(size: 100.0))
                            .lineLimit(1)
                            .minimumScaleFactor(0.1)
                        Spacer()
                        Text("data 2")
                    }
                    .frame(maxHeight: .infinity)
                    .padding()
                )
        }
        .frame(maxHeight: 300) // 可自定义整体高度，也可去掉让布局自适应内容高度
    }
}

如果需要允许顶部文本换行，删掉.lineLimit(1)即可，顶部文本会在上部区域自动换行，底部文本依然保持对齐，不会出现错位。

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