将你的 JSON 数据转换为原生 View。
只需构建 JSONDataView(json: Data) 视图即可设置 UI。
JSON 很好，但是怎么做呢？
- 指定你的视图的
type（ViewType） - 它的
properties（ViewProperties） values（例如 text、imageUrl、systemIconName、localImageName）（Values）subviews（用于 stacks、list & scrollView）
Image (图片)
- 对于图片，我们有 3 个选项。（如果设置了多个，则顺序如下）
- systemIconName (系统图标名称)
- localImageName (本地图片名称)
- imageUrl (图片 URL)
{
"type": "Image",
"values": {
"systemIconName": "person.crop.circle"
},
"properties": {
"width": 60,
"height": 60
}
}
默认应用 resizable() & scaledToFit() 修饰符。
Text (文本)
* font (largeTitle, title, headline, subheadline, body, callout, footnote, caption)
* fontWeight (ultraLight, thin, light, regular, medium, semibold, bold, heavy, black)
{
"type": "Text",
"values": {
"text": "Enes Karaosman"
},
"properties": {
"fontWeight": "semibold",
"font": "body"
}
}
VStack (垂直堆叠)
* spacing: Int
* horizontalAlignment: (leading, center, trailing) // default is center
{
"type": "VStack",
"properties": {
"spacing": 8,
"horizontalAlignment": "leading",
..
},
"subviews": [
...
]
}
HStack (水平堆叠)
* spacing: Int
* verticalAlignment: (top, bottom, center, firstTextBaseline, lastTextBaseline) // default is center
{
"type": "HStack",
"properties": {
"spacing": 8,
"verticalAlignment": "top",
..
},
"subviews": [
...
]
}
ZStack (Z轴堆叠)
{
"type": "ZStack",
"subviews": [
{
"type": "Circle",
"properties": {
"foregroundColor": "#ff0000",
"width": 200
}
},
{
"type": "Circle",
"properties": {
"foregroundColor": "#00ff00",
"width": 150
}
},
{
"type": "Circle",
"properties": {
"foregroundColor": "#0000ff",
"width": 100
}
}
]
}
List (列表)
{
"type": "List",
"subviews": [
{ ... },
{ ... },
{ ... }
]
}
ScrollView (滚动视图)
滚动视图内容（子视图）会根据给定的轴自动放置在 Stack 中。
如果轴是垂直方向，则放置在 VStack 中，否则放置在 HStack 中。
{
"type": "ScrollView",
"properties": {
"axis": "vertical",
"showsIndicators": true
}
"subviews": [
{ ... },
{ ... },
{ ... }
]
}
- Spacer (占位符) (
minLenght: Int?) - Rectangle (矩形)
- Circle (圆形)
- Divider (分割线)
{
"type": "HStack",
"properties": {
"height": 100,
"padding": 16,
"spacing": 16
},
"subviews": [
{
"type": "Image",
"values": {
"systemIconName": "person.crop.circle"
},
"properties": {
"width": 60,
"height": 60
}
},
{
"type": "VStack",
"properties": {
"foregroundColor": "#f0f00f",
"spacing": 8,
"horizontalAlignment": "leading"
},
"subviews": [
{
"type": "Text",
"values": {
"text": "Enes Karaosman"
},
"properties": {
"fontWeight": "semibold",
"foregroundColor": "#000000"
}
},
{
"type": "Text",
"values": {
"text": "Here is a bit description like text"
},
"properties": {
"foregroundColor": "#070707"
}
}
]
}
]
}
{
"type": "VStack",
"subviews": [
{
"type": "Text",
"properties": {
"font": "title"
},
"values": {
"text": "LARGE TITLE TEXT"
}
},
{
"type": "Image",
"values": {
"imageUrl": "http://picsum.photos/400/200"
},
"properties": {
"padding": 16,
"height": 200
}
},
{
"type": "Text",
"properties": {
"padding": 16,
"font": "title",
"fontWeight": "semibold"
},
"values": {
"text": "Semibold Title"
}
},
{
"type": "List",
"properties": {
"horizontalAlignment": "leading",
"spacing": 16,
"padding": 8
},
"subviews": [
{
"type": "HStack",
"properties": {
"foregroundColor": "#001238",
"spacing": 8
},
"subviews": [
{
"type": "Image",
"properties": {
"height": 70
},
"values": {
"imageUrl": "http://picsum.photos/70/70"
}
},
{
"type": "VStack",
"properties": {
"spacing": 4,
"horizontalAlignment": "leading"
},
"subviews": [
{
"type": "Text",
"values": { "text" : "Item.1 Title" }
},
{
"type": "Text",
"properties": {
"foregroundColor": "#828282"
},
"values": { "text" : "Here is multiline description text in VStack which is inside HStack" }
}
]
}
]
},
{
"type": "HStack",
"properties": {
"foregroundColor": "#001238",
"spacing": 8
},
"subviews": [
{
"type": "Image",
"properties": {
"height": 70
},
"values": {
"imageUrl": "http://picsum.photos/70/70"
}
},
{
"type": "VStack",
"properties": {
"spacing": 4,
"horizontalAlignment": "leading"
},
"subviews": [
{
"type": "Text",
"values": { "text" : "Item.2 Title" }
},
{
"type": "Text",
"properties": {
"foregroundColor": "#828282"
},
"values": { "text" : "Here is second multiline description text in VStack which is inside HStack" }
}
]
}
]
}
]
}
]
}