Vstack chiled Hstack elements do not distribute equally

Question

I have two Hstack inside Vstack but Elements of Hstack are not distributed equally due to text length.

Due to Current task and Completed Task Text length my Hstack do not equally distribute. How can I achieved equally distribution?

I have to use VSTACK and Inside it HSTACK and inside it three Vstack with image and text. Similarly I have another Hstack and inside it three VSTACK with image and text but element inside my HSTACK do not distributed due to the length of text.

VStack{
    VStack{
        HStack{
            Spacer()
            VStack{
                availableFuntionView(id:0, imageName: "home_icon_new_taks")
                Text("New Task's")
                    .foregroundColor(.white)
                    .font(.system(size: UIScreen.main.bounds.width * 0.04))
                    .minimumScaleFactor(0.5)
                    .lineLimit(1)
            }
            Spacer()
            VStack{
                availableFuntionView(id:1, imageName: "home_icon_current_taks")
                Text("CURRENT TASK")
                    .foregroundColor(.white)
                    .font(.system(size: UIScreen.main.bounds.width * 0.04))
                    .minimumScaleFactor(0.5)
                    .lineLimit(1)
            }
            Spacer()
            VStack{
                availableFuntionView(id:2, imageName: "home_icon_completed_tasks")
                Text("COMPLETED TASK")
                    .foregroundColor(.white)
                    .font(.system(size: UIScreen.main.bounds.width * 0.04))
                    .minimumScaleFactor(0.5)
                    .lineLimit(1)
            }
            Spacer()
        }
    }
    VStack{
        HStack{
            Spacer()
            VStack{
                availableFuntionView(id:3, imageName: "home_icon_chat")
                Text("CHAT")
                    .foregroundColor(.white)
                    .font(.system(size: UIScreen.main.bounds.width * 0.04))
                    .minimumScaleFactor(0.5)
                    .lineLimit(1)
            }
            Spacer()
            VStack{
                availableFuntionView(id:4, imageName: "home_icon_settings")
                Text("SETTING")
                    .foregroundColor(.white)
                    .font(.system(size: UIScreen.main.bounds.width * 0.04))
                    .minimumScaleFactor(0.5)
                    .lineLimit(1)
            }
            Spacer()
            VStack{
                availableFuntionView(id:2, imageName: "home_icon_logout")
                Text("LOGOUT")
                    .foregroundColor(.white)
                    .font(.system(size: UIScreen.main.bounds.width * 0.04))
                    .minimumScaleFactor(0.5)
                    .lineLimit(1)
            }
            Spacer()
        }
    }
    
    Spacer().frame(minHeight: 20, maxHeight: .infinity)
}

I hope my question is clear. Please help me out. I will be very thankful.

Answer 1

You need to use a GeometryReader. This will give you the screen size of whatever device you are currently running on. Now, this is probably not an ideal set up as you could end up with shortened text. I am not sure how much you are trying to put on the screen at once...

        GeometryReader { geometry in
        VStack{
            VStack{
                HStack{
                    VStack{
                        availableFuntionView(id:0, imageName: "home_icon_new_taks")
                        Text("New Task's")
                            .foregroundColor(.white)
                            .font(.system(size: UIScreen.main.bounds.width * 0.04))
                            .minimumScaleFactor(0.5)
                            .lineLimit(1)
                    }
                    .frame(width: (geometry.size.width / 4))
                    
                    VStack{
                        availableFuntionView(id:1, imageName: "home_icon_current_taks")
                        Text("CURRENT TASK")
                            .foregroundColor(.white)
                            .font(.system(size: UIScreen.main.bounds.width * 0.04))
                            .minimumScaleFactor(0.5)
                            .lineLimit(1)
                    }
                    .frame(width: (geometry.size.width / 4))

                    VStack{
                        availableFuntionView(id:2, imageName: "home_icon_completed_tasks")
                        Text("COMPLETED TASK")
                            .foregroundColor(.white)
                            .font(.system(size: UIScreen.main.bounds.width * 0.04))
                            .minimumScaleFactor(0.5)
                            .lineLimit(1)
                    }
                    .frame(width: (geometry.size.width / 4))
                }
            }
            VStack{
                HStack{
                    Spacer()
                    VStack{
                        availableFuntionView(id:3, imageName: "home_icon_chat")
                        Text("CHAT")
                            .foregroundColor(.white)
                            .font(.system(size: UIScreen.main.bounds.width * 0.04))
                            .minimumScaleFactor(0.5)
                            .lineLimit(1)
                    }
                    .frame(width: (geometry.size.width / 4))

                    VStack{
                        availableFuntionView(id:4, imageName: "home_icon_settings")
                        Text("SETTING")
                            .foregroundColor(.white)
                            .font(.system(size: UIScreen.main.bounds.width * 0.04))
                            .minimumScaleFactor(0.5)
                            .lineLimit(1)
                    }
                    .frame(width: (geometry.size.width / 4))

                    VStack{
                        availableFuntionView(id:2, imageName: "home_icon_logout")
                        Text("LOGOUT")
                            .foregroundColor(.white)
                            .font(.system(size: UIScreen.main.bounds.width * 0.04))
                            .minimumScaleFactor(0.5)
                            .lineLimit(1)
                    }
                    .frame(width: (geometry.size.width / 4))

                }
            }
            
            Spacer().frame(minHeight: 20, maxHeight: .infinity)
        }
    }
}

You will have to play with the multiplier some for it to look the way you want, but this is the general idea.