5_1 swiftUIDemo Test1
2021-08-28 本文已影响0人
即使慢走也不停下
效果:想要一个这样的样式。
效果图.png
如何来考虑布局呢?
解析.png
思路:
首先:从图上可以看出左边的为一个整体,右边的为一个整体。
然后:上述每一部分都是VStack结构
最后:上述VStack中,每一部分为一个HStack,因为纯Text只会居中,不好设置间距
Ok,上代码:
核心代码:
struct DateTheme1: View {
var body: some View {
ZStack {
Image("twinlake")
.resizable()
.frame(width: 155, height: 155)
VStack {
HStack {
Spacer()
Text("23")
.font(Font.system(size: 57))
.padding(.trailing, 17)
.frame(height: 68)
}
.padding(.top, 5)
HStack {
Spacer()
Text("15")
.font(Font.system(size: 57))
.padding(.trailing, 17)
.padding(.top, -(18))
}
Spacer()
}
VStack {
Spacer()
HStack {
Text("FRI")
.font(Font.system(size: 29))
.padding(.leading, 14)
Spacer()
}
HStack {
Text("Nov 16")
.font(Font.system(size: 11))
.padding(.bottom, 14)
.padding(.leading, 14)
Spacer()
}
}
}
.frame(width: 155, height: 155)
.background(Color.yellow)
}
}