SwiftUI 不會對齊 ZStacks

Question

我目前正在嘗試按照教程處理 SwiftUI ，但不知何故我無法解決一個問題：

我創建了另一個視圖，即我的 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 。 閱讀文檔，這應該改變它的 position，但不知何故它沒有。 兩個堆棧都保持居中。

順便說一句，我還沒有特別接觸過 ContenView.swift。

Answer 1

實際上，對於任何一個內部 ZStack，您都需要設置框架。 這可以使它們到達邊緣。

  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)
        }

Answer 2

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

var body: some View {
    ZStack {
        VStack {
            HStack {
                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()

                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)
    }
}

}

這是您正在尋找的布局嗎？ 使用 VStack 和 HStack，您可以將視圖與頂部和兩側對齊