Vstack智利Hstack元素的分布不均匀

Question

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

由于当前任务和已完成任务文本的长度，我的Hstack的分布不均匀。如何实现平均分配？

我必须使用VSTACK和Inside it 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)
}

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

Answer 1

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

你必须玩一些乘数，让它看起来像你想要的样子，但这是一般的想法。