我目前正在尝试按照教程处理 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 呢。

最佳答案

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,您可以将 View 与顶部和两端对齐

关于ios - SwiftUI 不会对齐 ZStack,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58868698/

10-10 18:48
查看更多