Xcode Swift UI 侧边菜单内容未对齐

Question

我正在尝试在 Swift UI（Xcode 版本 11.5）中创建侧边菜单。菜单已创建，它似乎可以正常工作，但我面临的唯一问题是菜单文本未正确对齐（我需要它保持（前导）对齐）。

首页浏览量-

    struct HomePageView: View {
        @State var size = UIScreen.main.bounds.width / 1.6
    
        var body: some View {
            ZStack{
                Color.orange
                // main home page components here....
                NavigationView{
                    List(0..<5){_ in
                        
                        Text("Hello")
                    }
                    .navigationBarTitle("Home")
                    .navigationBarItems(leading: Button(action: {
                        self.size = 10
                        
                    }, label: {
                        Image("menu")
                            .resizable()
                            .frame(width: 30, height: 30)
                    }).foregroundColor(.black))
                }
                HStack{
                    menu(size: $size)
                        .cornerRadius(20)
                        .padding(.leading, -size)
                        .offset(x: -size)
                        //.shadow(color: Color.lairShadowGray.opacity(0.5), radius: 0, x: 0, y: 0)
                    Spacer()
                }
                //.shadow(color: Color.lairShadowGray.opacity(0.5), radius: 0, x: 0, y: 0)
            }.animation(.spring())
        }
    }

我尝试使用有效的状态变量动态创建菜单。对于菜单文本对齐，我尝试应用填充、框架、偏移但它没有用，不确定我是否在正确的位置应用

struct menu : View {
    @Binding var size : CGFloat
    @State var expand: Bool = false
    
    @State var sideMenuEntries = [
        SideMenuData(index: 0, imageName: "info.circle.fill",
                     menuText: "Menu Text 1",
                     subMenu: [""],
                     expand: false),
        SideMenuData(index: 1, imageName: "doc.on.doc.fill",
                     menuText: "Menu 2",
                     subMenu: [""],
                     expand: false)
    ]
    

    var body : some View{
        VStack{
            HStack{
                Spacer()
                Button(action: {
                    self.size =  UIScreen.main.bounds.width / 1.6
                }) {
                    Image("close").resizable()
                        .frame(width: 15, height: 15)
                        .padding()
                }
                .foregroundColor(.white)
                .clipShape(Circle())
            }
            ForEach (sideMenuEntries.indices) { index in
                //VStack (alignment: .leading, spacing: 0, content: {
                VStack (alignment: .leading, spacing: 0, content: {
                    HStack{
                        Image(systemName: self.sideMenuEntries[index].imageName).resizable().frame(width: 25, height: 25)//.padding(.leading, 5)
                            .foregroundColor(.white)
                        Text(self.sideMenuEntries[index].menuText).fontWeight(.heavy).foregroundColor(.white)
                        Image(systemName: self.sideMenuEntries[index].expand ? "chevron.compact.up" : "chevron.compact.down")
                            .resizable()
                            .frame(width: 10, height: 10)
                            .foregroundColor(.white)
                    }
                    .contentShape(Rectangle())
                    .onTapGesture {
                        self.sideMenuEntries[index].expand.toggle()
                    }
                    if self.sideMenuEntries[index].expand {
                        Button(action: {
                        }){
                            VStack (alignment: .leading){
                                Text("Sub Menu 1")
                                    .foregroundColor(.white)
                                Text("Sub 2")
                                    .foregroundColor(.white)
                                Text("Sub Menu 3")
                                    .foregroundColor(.white)
                                Text("Sub 4")
                                    .foregroundColor(.white)
                            }
                            .padding([.top, .bottom], 4)
                            .padding(.leading, 14)
                        }
                    }
                })
            }
            Spacer()
        }
        .frame(width: UIScreen.main.bounds.width / 1.3)
        .background(LinearGradient(
            gradient: Gradient(
                colors: [.buttonGradientStartColor, .buttonGradientEndColor]),
            startPoint: .top,
            endPoint: .bottom))
       
    }
}

Answer 1

尝试添加

.listStyle(PlainListStyle())

到您在 HomePageView 中的列表

Answer 2

这是可能的修复方法

在 Xcode 11.4 / iOS 13.4

上使用复制代码进行测试

struct menu : View {
    @Binding var size : CGFloat
    @State var expand: Bool = false

    @State var sideMenuEntries = [
        SideMenuData(index: 0, imageName: "info.circle.fill",
                     menuText: "Menu Text 1",
                     subMenu: [""],
                     expand: false),
        SideMenuData(index: 1, imageName: "doc.on.doc.fill",
                     menuText: "Menu 2",
                     subMenu: [""],
                     expand: false)
    ]


    var body : some View{
        VStack(alignment: .leading) {           // << here !!
            HStack{
                Spacer()
                Button(action: {
                    self.size =  UIScreen.main.bounds.width / 1.6
                }) {
                    Image("close").resizable()
                        .frame(width: 15, height: 15)
                        .padding()
                }
                .foregroundColor(.white)
                .clipShape(Circle())
            }
            ForEach (sideMenuEntries.indices) { index in
                //VStack (alignment: .leading, spacing: 0, content: {
                VStack (alignment: .leading, spacing: 0, content: {
                    HStack{
                        Image(systemName: self.sideMenuEntries[index].imageName).resizable().frame(width: 25, height: 25)//.padding(.leading, 5)
                            .foregroundColor(.white)
                        Text(self.sideMenuEntries[index].menuText).fontWeight(.heavy).foregroundColor(.white)
                        Image(systemName: self.sideMenuEntries[index].expand ? "chevron.compact.up" : "chevron.compact.down")
                            .resizable()
                            .frame(width: 10, height: 10)
                            .foregroundColor(.white)
                    }
                    .contentShape(Rectangle())
                    .onTapGesture {
                        self.sideMenuEntries[index].expand.toggle()
                    }
                    if self.sideMenuEntries[index].expand {
                        Button(action: {
                        }){
                            VStack (alignment: .leading){
                                Text("Sub Menu 1")
                                    .foregroundColor(.white)
                                Text("Sub 2")
                                    .foregroundColor(.white)
                                Text("Sub Menu 3")
                                    .foregroundColor(.white)
                                Text("Sub 4")
                                    .foregroundColor(.white)
                            }
                            .padding([.top, .bottom], 4)
                            .padding(.leading, 14)
                        }
                    }
                })
            }
            Spacer()
        }.padding(.leading, 30)                             // << here !!
        .frame(width: UIScreen.main.bounds.width / 1.3)
        .background(LinearGradient(
            gradient: Gradient(
                colors: [.buttonGradientStartColor, .buttonGradientEndColor]),
            startPoint: .top,
            endPoint: .bottom))

    }
}

Xcode Swift UI 侧边菜单内容未对齐

Xcode Swift UI Side menu contents are not aligned

ios

swift

xcode

swiftui

side-menu