在 SwiftUI 中的形状上添加多个文本叠加

Question

我正在做一个项目，我在 SwiftUI 中使用不同的形状，例如这个 RoundedRectangle。 我想通过叠加在上面添加文本，但它不允许我添加超过一行。我试图搜索一些叠加教程，但总能找到那些只显示 - 文本生命周期 - 示例的教程。

所以我想知道是否有一种方法可以在这样的形状上添加多行文本叠加层，或者是否有更好的方法来实现它。

感谢您的反馈。

这是当前代码：

import SwiftUI


struct ContentView: View {
    var body: some View {
        
        HStack {
        RoundedRectangle(cornerRadius: 20)
            .frame(width: 320, height: 200)
            .foregroundColor(Color.blue)
            .overlay(
                Text("Hello there")
           )
            
      }
    }
}

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

这是我理想中想要的，但这样行不通：

import SwiftUI


struct ContentView: View {
    var body: some View {
        
        HStack {
        RoundedRectangle(cornerRadius: 20)
            .frame(width: 320, height: 200)
            .foregroundColor(Color.blue)
            .overlay(
                Text("Hello there")
                Text("Hello there")
                Text("Hello there")
                Text("Hello there")
                Text("Hello there")
                Text("Hello there")
                
           )
            
      }
    }
}

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

Answer 1

将您的文本与 Group、VStack、HStack 等中的任何一个包裹在一个容器中。

struct ContentView: View {
    var body: some View {
           HStack {
           RoundedRectangle(cornerRadius: 20)
               .frame(width: 320, height: 200)
               .foregroundColor(Color.blue)
               .overlay(
                Group{ //<-- Here
                   Text("Hello there")
                   Text("Hello there")
                   Text("Hello there")
                   Text("Hello there")
                   Text("Hello there")
                   Text("Hello there")
                }
              )
         }
       }
}

或者您可以使用 @ViewBuilder

struct ContentView: View {
    var body: some View {
           HStack {
           RoundedRectangle(cornerRadius: 20)
               .frame(width: 320, height: 200)
               .foregroundColor(Color.blue)
               .overlay(
                overlayView
              )
         }
       }
    
    // Make your view here
    @ViewBuilder
    private var overlayView: some View {
        Text("Hello there")
        Text("Hello there")
        Text("Hello there")
        Text("Hello there")
        Text("Hello there")
        Text("Hello there")
    }
}

在 SwiftUI 中的形状上添加多个文本叠加

Adding multiple text overlay on shapes in SwiftUI

overlay

shapes

ios

swiftui