Выровняйте прямоугольник так, чтобы он находился на определенном расстоянии от нижнего края безопасной области SWIFTUI

Question

Я привык к Interface Builder и ограничениям макета, но теперь я хочу преобразовать свое приложение в Swift UI. То, что я сейчас пытаюсь сделать, это выровнять верхний край вида, помеченного 1, чтобы он находился в пределах определенного расстояния от нижнего края безопасной области (помеченного 2), чтобы верхний край, который теперь находится в 1, затем быть в позиции 3. Я попытался использовать проставки, но тогда это будет выглядеть по-разному на меньших устройствах, таких как iPhone 8. В IB я мог бы использовать простое ограничение макета. Как это работает в Swift UI? Я приложил соответствующий код и изображение. Спасибо за вашу помощь.

struct ContentView: View {
    init() {
        UINavigationBar.appearance().backgroundColor = .orange
    }

    var body: some View {
        NavigationView {

            VStack{
                Spacer()

                ZStack{
                    Rectangle()
                    .fill(Color(hue: 0, saturation: 0, brightness: 0, opacity: 0.1))

                    Image("")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 100, height: 150)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color.white, lineWidth: 4))
                    .shadow(radius: 10)

                }.frame(width: UIScreen.main.bounds.width, height:  UIScreen.main.bounds.width, alignment: .center)

                Spacer(minLength: 100)

                ZStack(alignment: .bottom){
                    ExtractedView()
                    .edgesIgnoringSafeArea(.bottom)
                }

            }

            .navigationBarTitle(Text("You See"))
            .navigationBarHidden(false)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice("iPhone")
    }
}

struct ExtractedView: View {
    @State private var name: String = ""

    var body: some View {
        VStack{
            ZStack(alignment: .top){
                VStack{
                    RoundedRectangle(cornerRadius: 50)
                    .frame(width: 60, height: 7)
                        .padding(.top)

                    Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
                        Text("Start advertising")
                            .font(.headline)
                            .foregroundColor(Color.black)
                    }.padding(.top)

                    TextField("Test", text: $name)
                        .padding(.all)
                        .background(Color.white.cornerRadius(20))
                        .padding()

                }


                RoundedRectangle(cornerRadius: 30)
                    .fill(Color(hue: 0, saturation: 0, brightness: 0, opacity: 0.1))
                    .zIndex(-5)
            }
        }
    }
}

Answer 1

Хорошо, я смог решить свою проблему. Хитрость заключается в том, чтобы создать два VStacks с различным выравниванием кадров. Внешний VStack имеет верхнее выравнивание, так что представление Discover может быть сверху. Внутренний VStack имеет нижнее выравнивание, так что лист может быть поднят снизу вверх. В этом случае пространство будет заполнено снизу вверх.

VStack{
        Discover()
            .padding(.top, 60.0)
        VStack{
            Text("Recent Messages:")
                .font(.headline)

            DetailSheet()
                .offset(x: 0, y: 0)
        }.frame(width: g.size.width, height: (g.size.height - g.size.width - 80 + 200), alignment: .bottom)

    }
    .frame(width: g.size.width, height: g.size.height, alignment: .top)

Answer 2

вы можете попробовать это:

смещение -10 - это просто ваше смещение, которое вы хотите получить ...

надеюсь, я вас правильно понял Я не уверен ...

var body: some View {
        VStack{
      //      ZStack(alignment: .top){
                VStack{
                    RoundedRectangle(cornerRadius: 50)
                    .frame(width: 60, height: 7)
                        .padding(.top)

                    Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
                        Text("Start advertising")
                            .font(.headline)
                            .foregroundColor(Color.black)
                    }.padding(.top)

                    TextField("Test", text: $name)
                        .padding(.all)
                        .background(Color.white.cornerRadius(20))
                        .padding()

                }.background(RoundedRectangle(cornerRadius: 30)
                .fill(Color(hue: 0, saturation: 0, brightness: 0, opacity: 0.1))
                ).offset(y:-10)



            }
    //    }