SwiftUI实现背景图顶部栏：如何将绿色UI元素移至屏幕顶部

问题描述 #

希望背景图和绿色UI元素位于屏幕顶部，但运行代码后绿色UI元素处于屏幕中间，需调整布局将其移至顶部。

原始代码 #

struct AppointmentStep1: View {

    @Environment(\.dismiss) var dismiss

    var body: some View {
        ZStack {
            // Background image
            Image("home_bg")
                .resizable()
                .scaledToFill()
                .edgesIgnoringSafeArea(.all)
            VStack {
                HStack {
                    Button  {
                        dismiss()
                    } label: {
                        Image(systemName: "arrow.left")
                            .font(.system(size: 25))
                            .tint(.white)
                            .padding(.trailing, 6)
                    }

                    Text("Appointment")
                        .font(.calibriRegular(with: 20))
                        .foregroundStyle(.white)
                    Spacer()
                }
                .padding(16)
            }
            .background(
                Color.appGreen2
                    .ignoresSafeArea()
            )

           Spacer()
        }
    }
}

解决方法 #

方法1：给ZStack设置顶部对齐 #

ZStack默认居中对齐，添加alignment: .top属性可让内部绿色UI固定在顶部，同时移除ZStack内多余的Spacer()：

struct AppointmentStep1: View {

    @Environment(\.dismiss) var dismiss

    var body: some View {
        ZStack(alignment: .top) { // 新增顶部对齐设置
            // Background image
            Image("home_bg")
                .resizable()
                .scaledToFill()
                .edgesIgnoringSafeArea(.all)
            VStack {
                HStack {
                    Button  {
                        dismiss()
                    } label: {
                        Image(systemName: "arrow.left")
                            .font(.system(size: 25))
                            .tint(.white)
                            .padding(.trailing, 6)
                    }

                    Text("Appointment")
                        .font(.calibriRegular(with: 20))
                        .foregroundStyle(.white)
                    Spacer()
                }
                .padding(16)
            }
            .background(
                Color.appGreen2
                    .ignoresSafeArea()
            )
        }
    }
}

方法2：改用VStack垂直布局控制 #

通过VStack的垂直布局特性，让顶部UI自然停留在屏幕上方，背景图作为整个布局的底层：

struct AppointmentStep1: View {

    @Environment(\.dismiss) var dismiss

    var body: some View {
        VStack {
            // 顶部绿色UI
            VStack {
                HStack {
                    Button  {
                        dismiss()
                    } label: {
                        Image(systemName: "arrow.left")
                            .font(.system(size: 25))
                            .tint(.white)
                            .padding(.trailing, 6)
                    }

                    Text("Appointment")
                        .font(.calibriRegular(with: 20))
                        .foregroundStyle(.white)
                    Spacer()
                }
                .padding(16)
            }
            .background(
                Color.appGreen2
                    .ignoresSafeArea()
            )
            
            Spacer() // 占据剩余空间，固定顶部UI位置
        }
        .background(
            Image("home_bg")
                .resizable()
                .scaledToFill()
                .edgesIgnoringSafeArea(.all)
        )
    }
}

内容的提问来源于stack exchange，提问作者Swift