Swiftui Vstack chiled Hstack元素分布不均匀

我在Vstack中有两个Hstack，但由于文本长度的原因，Hstack的元素分布不均匀

由于当前任务和已完成任务的文本长度，我的Hstack分布不均匀。我怎样才能实现公平分配

我必须使用VSTACK，里面是HSTACK，里面是三个VSTACK，带有图像和文本。 类似地，我有另一个Hstack，其中有三个VSTACK，带有图像和文本，但由于文本的长度，我的Hstack中的元素没有分布

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)
}

---

我希望我的问题是清楚的。请帮帮我。我将非常感谢。

您需要使用GeometryReader。这将为您提供当前运行的任何设备的屏幕大小。现在，这可能不是一个理想的设置，因为您可能会以缩短文本结束。我不知道你一下子想在屏幕上显示多少

        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)
        }
    }
}

---

您必须使用乘法器才能使它看起来像您想要的那样，但这是一般的想法。

您需要使用GeometryReader。这将为您提供当前运行的任何设备的屏幕大小。现在，这可能不是一个理想的设置，因为您可能会以缩短文本结束。我不知道你一下子想在屏幕上显示多少

        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)
        }
    }
}

你将不得不玩一些乘数，它看起来像你想要的方式，但这是一般的想法