如何使 Text View 锚点位于 SwiftUI 的前沿？

Question

我正在尝试在我的一个应用程序中为城市制作“卡片视图”。该卡的右上角有一个“文本”视图来显示信息。文本将根据字符串的长度进行自我调整。但是，我需要文本向前缘延伸，而不是从中心延伸。

这是视图：

我需要视图保持在这个位置并向箭头方向生长。这就是添加“短”字符串时的样子。

下面是一个示例，说明字符串较长时的外观。

注意到视图是如何从中心扩展而某些视图被隐藏的吗？我需要它保持右侧对齐，在视图和边缘之间留出空间。

这是此视图的代码，您可以在 Xcode 中的 Playground 上使用它。请记住，您可能需要将图像添加到 Playground 中的资源中才能使其正常工作。

import SwiftUI
import PlaygroundSupport

struct CityView: View {

    
    var body: some View {
        ZStack {
            Image(uiImage: UIImage(named: "barcelona.png")!)
                .resizable()
                .aspectRatio(contentMode: .fill)
            
            VStack(alignment: .leading) {
                Text("Barcelona")
                    .font(.system(size: 16, weight: .medium))
                    .padding(.trailing, 75.0)
                    .foregroundStyle(Color.black)
               
                Text("Spain")
                    .font(.system(size: 13, weight: .regular))
                    .foregroundStyle(Color.secondary)
            }
            .frame(maxWidth: .infinity, maxHeight: 49)
            .background(Color.white)
            .offset(y: 76)
            
            Text("Most Fly-thru")
                .frame(maxHeight: 32)
                .padding(.horizontal, 8)
                .font(.system(size: 13, weight: .medium))
                .foregroundStyle(Color.white)
                .background(
                    Capsule()
                        .foregroundStyle(Color.primary.opacity(0.8))
                )
                .offset(x: 38, y: -76)
        }
        .frame(width: 166, height: 201)
        .clipShape(RoundedRectangle(cornerRadius: 12))
        .overlay {
            RoundedRectangle(cornerRadius: 12)
                .stroke(Color.gray, lineWidth: 1.2)
        }
        .padding()
    }
}

PlaygroundPage.current.setLiveView(CityView())

Answer 1

我认为你的设计存在一些问题。

1. 您试图强制顶部和底部文本适合整个 ZStack。但是，您的 ZStack 不适合其内容大小。尝试注释掉

   .clipShape

   ，你会看到图像淹没了边框。
2. 您正在修复这些视图的

   offSet

   ，因此它无法动态适应，即另一个场景中的另一个父视图，无论更大还是更小。

所以我建议将其分成两个部分。 contentView 有一个图像和一个图像叠加层。

struct OverlayCityView: View {
    var body: some View {
        ZStack {
            VStack {
                Spacer()

                VStack(alignment: .leading) {
                    Text("Barcelona")
                        .font(.system(size: 16, weight: .medium))
                        .padding(.trailing, 75.0)
                        .foregroundStyle(Color.black)

                    Text("Spain")
                        .font(.system(size: 13, weight: .regular))
                        .foregroundStyle(Color.secondary)
                }
            }

            VStack {
                HStack {
                    Spacer()
                    Text("Most Fly-thru")
                        .frame(maxHeight: 32)
                        .padding(.horizontal, 8)
                        .font(.system(size: 13, weight: .medium))
                        .foregroundStyle(Color.white)
                        .background(
                            Capsule()
                                .foregroundStyle(Color.primary.opacity(0.8))
                        )
                }
                Spacer()
            }
        }
    }
}

struct CityView: View {
    var body: some View {
        VStack {
            Image(uiImage: UIImage(named: "barcelona.png")!)
                .resizable()
                .frame(width: 166, height: 200)
                .aspectRatio(contentMode: .fit)

            Spacer()
                .frame(height: 40)
        }
        .overlay {
            OverlayCityView()
        }
        .overlay {
            RoundedRectangle(cornerRadius: 12)
                .stroke(Color.gray, lineWidth: 1.2)
        }
    }
}