swift - SwiftUI create custom menu with frame and items

Question

I have a problem. I have a main view to build but I cannot manage how to do it like it is on screen. I tried to use 3 HStack's in VStack, but cannt manage what to do next, use frame or overlay, completelly newbie in SwiftUI. Menu items will contains images and text below. Does anyone can help me with that. Greetings enter image description here

标签： swiftuser-interfacemenugrid

Answer 1

Here is a possible solution. Using VStack as main wrapper then HStack as rows where every Item tries to have to maximum width.

struct ContentView: View {
    
    var body: some View {

        VStack(spacing: 0) {
            HStack(spacing: 0) {
                ItemView()
                ItemView()
            }
            HStack(spacing: 0) {
                ItemView()
                ItemView()
            }
            HStack(spacing: 0) {
                ItemView()
                ItemView()
            }
        }
    }
}


struct ItemView : View {
    var body : some View {
        VStack {
            Spacer()
            Image(systemName: "airplane")
                .resizable()
                .frame(width: 50, height: 50)
            Spacer()
        }.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
        .border(Color.black)
    }
}