如何摆脱 SwiftUI 中的垂直文本填充？

Question

我想制作一个里面有文字的矩形。矩形应该固定在显示器（或超级视图）的右侧和左侧。它的高度应该由文本决定。

我尝试了以下代码：

struct DescriptionView: View {

var description =
"""
02.11.2021
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud urgueam, non intellegere eum quid sibi dicendum sit, cum dolorem summum malum esse dixerit. Omnis enim est natura diligens sui. Quamquam haec quidem praeposita recte et reiecta dicere licebit. Duo Reges: constructio interrete. Idem iste, inquam, de voluptate quid sentit? Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. Tum ille: Tu autem cum ipse tantum librorum habeas, quos hic tandem requiris? Bona autem corporis huic sunt, quod posterius posui, similiora..
Bild © Lorem Lipsum
"""

var body: some View {
    ZStack(alignment: .bottom) {
        Color.red
            .edgesIgnoringSafeArea(.all)

        Text(description)
            .foregroundColor(.white)
            .font(.headline)
            .background(
                Rectangle()
            )
            .edgesIgnoringSafeArea(.horizontal)
        
    }
}

}

结果如下所示：

如您所见，文本的左右两侧有一些填充。我怎样才能摆脱这个？矩形应始终尽可能宽，而文本决定矩形的高度。

更新： 我正在使用 Xcode 版本 13.1 (13A1030d)。当我在 TabView 中嵌入 DescriptionView() 时，填充在 Xcode 预览中消失。但是，当我在模拟器中启动应用程序时，填充再次出现。

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.black
                .edgesIgnoringSafeArea(.all)
            TabView {
                DescriptionView()
                DescriptionView()
                DescriptionView()
            }
            .tabViewStyle(PageTabViewStyle())
            .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .interactive))
        }
    
    }
}

Xcode预览：

模拟器：

更新二： 正如建议的答案之一，我尝试了几何 reader。我摆脱了填充，但现在对齐是错误的。此外，我认为它不应该那么复杂（具有几何 reader 和堆栈）：

var body: some View {
    ZStack(alignment: .bottom) {
        Color.red
            .edgesIgnoringSafeArea(.all)
        
        GeometryReader { geometry in
            VStack() {
                Text(description)
                    .foregroundColor(.white)
                    .font(.headline)
                    .frame(maxWidth: .infinity)
                    .background(
                        Color.black
                    )
            }
        }
        
    }
}

Answer 1

我不知道这是否适合您的需求，但这种方式可以回答。

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack() {
                Text("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to mak")
                    .font(.title)
                    .background(Color.blue)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 2

您的 Text 视图正在使用最大宽度（在本例中为屏幕宽度）计算其大小，结果是 width 小于屏幕宽度，因为没有完美适合屏幕的文本行。

如果您希望 Text 视图完全展开，您应该使用 frame 修饰符：

var body: some View {
    ZStack(alignment: .bottom) {
        Color.red
            .edgesIgnoringSafeArea(.all)
        Text(description)
            .foregroundColor(.white)
            .font(.headline)
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(
                Rectangle()
            )
    }
}

如何摆脱 SwiftUI 中的垂直文本填充？

How to get rid of vertical text padding in SwiftUI?

ios

swift

swiftui

swiftui-text