SwiftUI基础之使用Spacer填充空间

如果说哪个控件最该学习，那么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教程和代码关注专栏

• 请关注我的专栏icloudend, SwiftUI教程与源码
  https://www.jianshu.com/c/7b3e3b671970