ios - SwiftUI 不会对齐 ZStacks

Question

我目前正在尝试按照教程处理 SwiftUI，但不知何故我无法解决一个问题:

我创建了另一个 View ，即我的 HomeView.swift - 该文件包含以下代码:

import SwiftUI

struct Home: View {
    var menu = menuData
    @State var show = false

    var body: some View {
        ZStack {

            ZStack(alignment: .topLeading) {
                Button(action: { self.show.toggle() }) {
                    HStack {
                        Spacer()
                        Image(systemName: "list.dash")
                            .foregroundColor(Color("primary"))
                    }
                    .padding(.trailing, 20)
                    .frame(width: 90, height: 60)
                    .background(Color.white)
                    .cornerRadius(30)
                    .shadow(color: Color("shadow"), radius: 10, x: 0, y: 10)
                }
                Spacer()
            }

            ZStack(alignment: .topTrailing) {
                Button(action: { self.show.toggle() }) {
                    HStack {
                        Spacer()
                        Image(systemName: "map.fill")
                            .foregroundColor(Color("primary"))
                    }
                    .padding(.trailing, 20)
                    .frame(width: 44, height: 44)
                    .background(Color.white)
                    .cornerRadius(30)
                    .shadow(color: Color("shadow"), radius: 10, x: 0, y: 10)
                }
                Spacer()
            }

            MenuView(show: $show)
        }
    }
}

struct Home_Previews: PreviewProvider {
    static var previews: some View {
        Home()
    }
}

struct MenuRow: View {
    var text: String?
    var image: String?
    var body: some View {
        HStack {
            Image(systemName: image ?? "")
                .foregroundColor(Color("third"))
                .frame(width: 32, height: 32, alignment: .trailing)
            Text(text ?? "")
                .font(Font.custom("Helvetica Now Display Bold", size: 15))
                .foregroundColor(Color("primary"))
            Spacer()
        }
    }
}

struct Menu: Identifiable {
    var id = UUID()
    var title: String
    var icon: String
}

let menuData = [
    Menu(title: "My Account", icon: "person.crop.circle.fill"),
    Menu(title: "Reservations", icon: "house.fill"),
    Menu(title: "Sign Out", icon: "arrow.uturn.down")
]


struct MenuView: View {
    var menu = menuData
    @Binding var show: Bool

    var body: some View {
        VStack(alignment: .leading, spacing: 20) {
            ForEach(menu) { item in
                MenuRow(text: item.title, image: item.icon)
            }
            Spacer()
        }
        .padding(.top, 20)
        .padding(30)
        .frame(minWidth: 0, maxWidth: .infinity)
        .background(Color.white)
        .cornerRadius(30)
        .padding(.trailing, 60)
        .shadow(radius: 20)
        .rotation3DEffect(Angle(degrees: show ? 0 : 60), axis: (x: 0, y: 10, z: 0))
        .animation(.default)
        .offset(x: show ? 0 : -UIScreen.main.bounds.width)
        .onTapGesture {
            self.show.toggle()
        }
    }
}

正如您所看到的，从一开始，在我的 Home 结构内部，我尝试对齐两个 ZStack - 一个 .topLeading 和一个 .topTrailing。 阅读文档，这应该改变它的位置，但不知何故它没有。两个堆栈都保持居中。

顺便说一句，我还没有特别接触过 ContenView.swift。

Answer 1

实际上，无论是内部ZStack，都需要设置frames。这可以使它们到达边缘。

  ZStack{

            ZStack{
            Button(action: { self.show.toggle() }) {
                HStack {
                    Spacer()
                    Image(systemName: "list.dash")
                        .foregroundColor(Color("primary"))
                }
                .padding(.trailing, 20)
                .frame(width: 90, height: 60)
                .background(Color.white)
                .cornerRadius(30)
                .shadow(color: Color("shadow"), radius: 10, x: 0, y: 10)
            }
            Spacer()
            }.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)

        ZStack{
            Button(action: { self.show.toggle() }) {
                HStack {
                    Spacer()
                    Image(systemName: "map.fill")
                        .foregroundColor(Color("primary"))
                }
                .padding(.trailing, 20)
                .frame(width: 44, height: 44)
                .background(Color.white)
                .cornerRadius(30)
                .shadow(color: Color("shadow"), radius: 10, x: 0, y: 10)
            }
            Spacer()
        }.frame(maxWidth: .infinity, maxHeight: .infinity,  alignment: .topTrailing)

        MenuView(show: $show)
        }