swift - SwiftUI 网格布局
问题描述
我正在尝试使用 SwiftUI 实现以下网格布局,但不太确定最佳方法。
我的代码在下面,它并没有完全得到我想要的,而且拥有许多嵌套堆栈似乎也很糟糕
VStack {
VStack {
HStack {
VStack {
Text("Text Here")
Text("336.851")
}
.padding(20)
.background(ColorManager.orange)
.cornerRadius(10)
VStack {
Text("Text Here")
Text("336.851")
}
.padding(20)
.background(ColorManager.red)
.cornerRadius(10)
}
HStack {
VStack {
Text("Text Here")
Text("336.851")
}
.padding(20)
.background(ColorManager.green)
.cornerRadius(10)
VStack {
Text("Text Here")
Text("336.851")
}
.padding(20)
.background(ColorManager.blue)
.cornerRadius(10)
VStack {
Text("Text Here")
Text("336.851")
}
.padding(20)
.background(ColorManager.purpleLight)
.cornerRadius(10)
}
}
}
我的代码给出了以下结果,我只是不确定如何最大化这些框跨越屏幕的一半和三分之一。另外,我采用嵌套堆栈的方法是否正确?
解决方案
你可以试试这个:
struct ContentView: View {
var body: some View {
VStack {
HStack {
cell(header: "Text Here", text: "336.851", color: Color.orange)
cell(header: "Text Here", text: "336.851", color: Color.red)
}
HStack {
cell(header: "Text Here", text: "336.851", color: Color.green)
cell(header: "Text Here", text: "336.851", color: Color.blue)
cell(header: "Text Here", text: "336.851", color: Color.purple)
}
}
}
func cell(header: String, text: String, color: Color) -> some View {
HStack {
VStack(alignment: .leading) {
Text(header)
.font(.caption)
Text(text)
.fontWeight(.semibold)
}
Spacer()
}
.frame(maxWidth: .infinity)
.padding(20)
.background(color)
.cornerRadius(10)
.padding(10)
}
}
推荐阅读
- java - 多个 AjaxCheckBox 无法控制 setEnabled
- python - 如何创建列表而不是包含特定数字
- r - 多列,我想根据 R 或 Excel 中的另一列重新排列这些列
- angular - 如何在父组件的 ng-content 中访问子组件的 ngFor 内的元素?
- xamarin.forms - 如何从 Shell 导航到在首页创建后退按钮的其他页面?(使用棱镜)
- javascript - 角材料选择列表复选框不可见检查
- css - Angular - 如何实现类似于工具提示的 UI 界面,但这会让我在其中放置一些控件并与它们交互
- css - 这段代码可以减少并且仍然具有相同的效果吗?
- c# - 如何通过单击按钮使表单标题动态更改?
- google-analytics - 谷歌分析活动/来源/媒体未显示