SwiftUI中的文本溢出到矩形的边界之外并带有叠加层答案

【问题标题】：Text spills outside of boundary of Rectangle in SwiftUI with overlaySwiftUI中的文本溢出到矩形的边界之外并带有叠加层
【发布时间】：2022-01-20 12:53:32
【问题描述】：

我希望蓝色矩形中的文本 1 和文本 2 位于 Rectangle 的边界内，但是当使用覆盖时，它似乎溢出给定边界之外。如何解决这个问题？

我也尝试了ZStack，但结果相同。

import SwiftUI

struct ContentView: View {

    var body: some View {
        VStack {
            ZStack {
                Rectangle()
                    .stroke(lineWidth: 1)
                    .frame(width: 1, height: 55)
                Rectangle()
                    .stroke(lineWidth: 10)
                    .cornerRadius(15)
                    .foregroundColor(Color.blue)
                    .frame(width: .infinity, height: 60)
                    .padding()
            }
            .overlay(
                HStack {
                    Text("Text 1")
                    Spacer()
                    Text("Text 2")
                }
            )
        }
    }
}

【问题讨论】：

标签： ios swiftui overlay

【解决方案1】：

您需要将叠加层放置在不同的位置（修饰符的顺序很重要！），例如

var body: some View {
    VStack {
        ZStack {
            Rectangle()
                .stroke(lineWidth: 1)
                .frame(width: 1, height: 55)
            Rectangle()
                .stroke(lineWidth: 10)
                .cornerRadius(15)
                .foregroundColor(Color.blue)
                .overlay(                     
                    HStack {                 // << here !!
                        Text("Text 1")
                        Spacer()
                        Text("Text 2")
                    }
                    .padding(.horizontal)
                )
                .frame(width: .infinity, height: 60)
                .padding()
        }
    }
}

使用 Xcode 13 / iOS 15 测试

【讨论】：