1

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

我希望我的问题很清楚。请帮帮我。我将非常感激。

4

1 回答 1

0

您需要使用 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)
        }
    }
}

您将不得不使用乘数来让它看起来像您想要的那样，但这是一般的想法。

于 2020-11-21T04:02:38.747 回答