Блог

Я только начал следить за курсом Apple SwiftUI на сайте под названием «Создание и объединение представлений«.

И я заметил странное поведение, которое я не могу понять в коде, отображаемом в структуре contentView, вот код и изображение результата.

 struct ContentView: View {
var body: some View {
    VStack {
        MapView()
            .edgesIgnoringSafeArea(.top)
            .frame(height: 300)
        
        CircleImage()
            .offset(y : -130)
            .padding(.bottom, -130)

        VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            HStack {
                Text("Joshua Tree National Park")
                    .font(.subheadline)
                Spacer()
                Text("California")
                    .font(.subheadline)
            }
        }
        .padding()
        
        Spacer()
    }
}
 

}

Отмечая здесь особое, но при изменении порядка модификаторов для MapView на.

         MapView()
            .frame(height: 300)
            .edgesIgnoringSafeArea(.top)
 

Центр CircleView больше не находится в нижней части MapView, см. Изображение.

Я заметил, что этого не произойдет, когда я удалю разделитель () внизу,

Итак, что же здесь происходит на самом деле? почему порядок модификаторов имеет значение? и как Spacer () таким образом влияет на другие представления?

Спасибо за помощь.

Почему порядок модификаторов имеет значение.

Потому что вы создаете фрейм, не игнорируя безопасную область во втором коде.

Кроме того, когда вы добавляете разделитель, ваш нижний лист просто становится выше. Итак, это выглядит хорошо, но совсем не эффективно.

В этом случае лучше поместить круглое изображение и нижнее содержимое в один контейнер. Таким образом, он всегда будет центрирован. Например:

 VStack {
    CircleImage()
        .offset(y : -130)
        .padding(.bottom, -130)
    
    VStack(alignment: .leading) {
        Text("Turtle Rock")
            .font(.title)
        HStack {
            Text("Joshua Tree National Park")
                .font(.subheadline)
            Spacer()
            Text("California")
                .font(.subheadline)
        }
    }
    .padding()
    
    Spacer()
}