初识SwiftUI之美学基础Spacer留白(最需要掌握的控件)

872 阅读1分钟

如果说哪个控件最该学习,那么Spacer肯定是首当其冲。苹果的审美和传统中国美学很像,都是非常讲究留白。Spacer作用就是将容器撑满,营造出足够的空间留白。

Spacer简介

官方文档: A flexible space that expands along the major axis of its containing stack layout, or on both axes if not contained in a stack.

翻译:在stack类的容器中沿着主轴灵活的扩充空间,如果不再stack中则沿着水平和垂直两个轴进行扩充

实际使用

不使用spacer效果

import SwiftUI

struct CirecleTextDetailRow: View {
    var body: some View {
        HStack{
            VStack{
            CircleText(name:"苏轼")
                Text("北宋")
                    .font(.subheadline)
            }.padding()
            RowDetail(title: "北宋文学家",
                      intro: "苏轼字子瞻",
                count: "1000")
                .padding(.trailing,10)
            Spacer()
        }
    }
}

不使用spacer效果g

空间由文字数量决定,没有全部充满空间

使用Spacer的效果

import SwiftUI

struct CirecleTextDetailRow: View {
    var body: some View {
        HStack{
            VStack{
            CircleText(name:"苏轼")
                Text("北宋")
                    .font(.subheadline)
            }.padding()
            RowDetail(title: "北宋文学家",
                      intro: "苏轼字子瞻",
                count: "1000")
                .padding(.trailing,10)
            Spacer()
        }
    }
}

使用Spacer的效果

整个HStack容器被撑满

更多SwiftUI教程和代码关注专栏