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

【问题标题】：How to get rid of vertical text padding in SwiftUI?如何摆脱 SwiftUI 中的垂直文本填充？
【发布时间】：2021-11-15 08:32:05
【问题描述】：

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

我尝试了以下代码：

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 Preview 中消失了。但是，当我在模拟器中启动应用程序时，填充再次出现。

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

Xcode 预览：

模拟器：

更新 2： 正如其中一个答案所建议的那样，我尝试了几何阅读器。我摆脱了填充，但现在对齐是错误的。另外我认为它不应该那么复杂（带有几何阅读器和堆栈）：

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
                    )
            }
        }
        
    }
}

【问题讨论】：

标签： ios swift swiftui swiftui-text

【解决方案1】：

您的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()
            )
    }
}

【讨论】：

【解决方案2】：

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

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()
    }
}

【讨论】：