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

Posted 2023-02-24

【中文标题】如何摆脱 SwiftUI 中的垂直文本填充？

【英文标题】：How to get rid of vertical text padding in 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
                    )
            
        
        
    

【参考方案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()