Question

我目前正在通过遵循一个教程来处理SwiftUI，但是不知何故我无法解决一个问题：

我创建了另一个视图，即HomeView.swift-此文件包含以下代码：

deleteall 'MYTABLE', 'HELLO\x00WORLD'

如您所见，就在刚开始的时候，在Home结构内部，我试图对齐两个ZStack-一个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() } } }和一个.topLeading。 阅读文档后，这应该会更改其位置，但不会改变。两个堆栈都居中。

顺便说一句，我还没有特别感动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，您可以使视图在顶部和两侧对齐

SwiftUI不会对齐ZStacks

2 个答案: