使用 .aspectRatio(contentMode: .fill) 后文本离开屏幕

Posted 2023-02-24

【中文标题】使用 .aspectRatio(contentMode: .fill) 后文本离开屏幕

【英文标题】：Text goes off screen after using .aspectRatio(contentMode: .fill)

【发布时间】：2020-08-10 15:14:18

【问题描述】：

我正在尝试使用 SwiftUI 制作带有背景图片的应用。但是，图像与屏幕的纵横比不同，使我使用.aspectRatio(contentMode: .fill) 将其填满整个屏幕。在我开始添加文本之前，这完全正常。添加文本时，它现在会离开屏幕，而不是像通常应该做的那样换行。

这是我的代码：

struct FeaturesView: View

    var body: some View
    
        ZStack
        
            Image("background")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)
            
            VStack(alignment: .leading)
            
                Text("Hello this is some sample text that i am writing to show that this text goes off the screen.")
            
            .foregroundColor(.white)
        
    

这是预览：

如您所见，文本离开了屏幕。我曾尝试使用“.frame()”并指定宽度和高度来修复它，但这会导致在其他视图中使用视图时出现问题。我正在使用 Xcode 12 测试版。

我是 Swift 和 SwiftUI 的新手，感谢所有帮助 :)

【参考方案1】：

当然可以，因为图像扩展了容器的框架，即ZStack，比屏幕宽度宽。

这是一个解决方案 - 让图像在真实背景中过自己的生活，并且不影响他人。使用 Xcode 12 / ios 14 测试。

var body: some View

    ZStack
    
        // ... other content
        VStack(alignment: .leading)
        
            Text("Hello this is some sample text that i am writing to show that this text goes off the screen.")
        
        .foregroundColor(.white)
    
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(
        Image("background")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .edgesIgnoringSafeArea(.all)
    )

【讨论】：

啊哈，我没想到……我现在觉得自己很蠢，谢谢你的帮助:)

【参考方案2】：

发生这种情况是因为您的 ZStack 使用的宽度等于您的图像，请尝试使用 VStack 和 geometryReader 包装您的图像。

GeometryReader  geometry in
    ZStack 
        Image() // your image
        VStack(alignment: .leading) 
            Text("Hello this is some sample text that i am writing to show that this text goes off the screen.")
        .foregroundColor(.white)
    .frame(maxWidth: geometry.size.width)     

我是在 Windows 上写的，可能有拼写错误

【讨论】：

所以你可以使用geometry.size.width来获取屏幕宽度？

这很聪明！我不知道