Блог

Я пытаюсь выровнять по правому краю несколько наложений, но не могу понять, как это сделать.

Здесь у меня есть VStack 2 изображения в правой части экрана, и я хочу отобразить текстовую метку наложения для каждого изображения слева от изображения, но выровненную по правому краю с другими метками, вот так:

       A LABEL  A
ANOTHER LABEL  B
 

Приведенный ниже код отображает метки, выровненные по центру, примерно так:

    A LABEL     A
ANOTHER LABEL  B
 

 struct TestOverlayOffset : View {
    var body : some View {
        HStack {
            Spacer()
            VStack(spacing: 32) {
                Spacer()
                Image(systemName: "a.circle").font(.title)
                    .overlay(labelOnTheLeft("A LABEL"))
                Image(systemName: "b.circle").font(.title)
                    .overlay(labelOnTheLeft("ANOTHER LABEL"))
                Spacer()
            }
            .background(Color.gray)
        }
        .background(Color.green)
    }
    
    func labelOnTheLeft(_ text: String) -> some View {
        GeometryReader { proxy in
            Text(text)
                .fixedSize()
                .foregroundColor(.black)
                .background(Color.yellow)
                .offset(x: -128 - proxy.size.width/2)
        }
    }
}
 

Вот возможное решение (с наименьшими изменениями и удалением жесткого кода).

Протестировано с Xcode 12.1 / iOS 14.1

 func labelOnTheLeft(_ text: String) -> some View {
    GeometryReader { proxy in
        Text(text)
            .fixedSize()
            .foregroundColor(.black)
            .background(Color.yellow)
            .padding(.trailing)
            .offset(x: -proxy.size.width)
            .frame(width: proxy.size.width, alignment: .trailing)
    }
}