Блог

Главная - Вопросы по программированию - Не работает выравнивание верха SwiftUI HStack

Не работает выравнивание верха SwiftUI HStack

#swift #swiftui

#swift #swiftui

Вопрос:

Я пытался выровнять текст ( Test на картинке) в HStack по верхнему краю, но выравнивание по верхнему краю не работает. Он все еще находится в центре.

Изображение

Вот мой код:

 struct ContentView: View {
    var body: some View {
        VStack {
            HStack(alignment: .top) {
                Text("Test")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .multilineTextAlignment(.leading)
                Spacer()
            }
            .frame(width: 480, height: 160)
            HStack {
                Text(
                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque volutpat ac tincidunt vitae semper quis lectus nulla at. Metus vulputate eu scelerisque felis imperdiet proin fermentum. Viverra accumsan in nisl nisi scelerisque. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum."
                )
                .font(.body)
                .foregroundColor(Color.black)
                .multilineTextAlignment(.leading)
                .frame(
                    minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity,
                    alignment: .topLeading
                )
                .padding()
            }
            .frame(width: 480, height: 320)
            .background(Color(.white))
        }
        .frame(width: 480, height: 480)
        .background(
            ZStack {
                Rectangle()
                    .fill(
                        LinearGradient(
                            gradient: Gradient(colors: [.blue, .red]),
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing
                        )
                    )
                    .blur(radius: 10)

                VisualEffectView(
                    material: .toolTip,
                    blendingMode: .withinWindow
                )
            }
        )
        .mask(
            RoundedRectangle(cornerRadius: 30)
        )
    }
}

Комментарии:

1. Может быть несколько причин, почему это происходит. Если вы удалите рамку вашего верхнего HStack и родительского VStack элементов, вы увидите, что она действительно прилипает к верхнему краю, так что это из-за ручного интервала. Вы могли бы удалить эти рамки, чтобы они соответствовали содержимому (и вместо этого использовать отступы / поля), или вы могли бы добавить VStack Spacer в качестве родительского элемента к верхней части, HStack чтобы сохранить текущие размеры рамки.

Ответ №1:

Вам нужно добавить выравнивание во фрейме

         HStack {
            Text("Test")
                .font(.largeTitle)
                .fontWeight(.bold)
                .multilineTextAlignment(.leading)
            Spacer()
        }
        .frame(width: 480, height: 160, alignment: .top)   // << here !!

Комментарии:

1. Это приятно.. но не знаете, почему это в кадре?

2. @Asperi можете ли вы объяснить, почему это работает, а HStack(alignment: .top) нет?