组合视图

一、横向组合视图

struct LandmarkRow: View {
    var entity: Landmark
    var body: some View {
        HStack {
            Image("1").resizable().frame(width: 60, height: 60)
            Text("测试1").font(.custom("", size: 16))
            Spacer()
        }.padding()
    }
}
结果

其中Spacer()是一个可以伸缩的空白控件,它负责占用其它控件布局完成后剩下的所有空间。

二、纵向组合视图

struct LandmarkDetail: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("测试1")
                .font(.title)
            HStack {
                Text("这是一个测试")
                    .font(.subheadline)
                Spacer()
            }
            Spacer()
        }
        .padding()
    }
}
结果

测试代码地址

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

推荐阅读更多精彩内容