5_1 swiftUIDemo Test1

效果:想要一个这样的样式。


效果图.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)
        
    }
}

demo下载:https://github.com/Alicechuanmei/WidgetTheme.git

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容