Padding/间距, Spacer/垫片, Initializer/初始化的使用

Hanyang Li

已于 2023-09-25 17:53:13 修改

阅读量849

点赞数

分类专栏： SwiftUI Bootcamp 文章标签： iOS Swift UI

于 2023-05-19 16:56:14 首次发布

本文链接：https://blog.csdn.net/u011193452/article/details/130769887

版权

SwiftUI Bootcamp 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

本文展示了在SwiftUI中使用Padding调整视图内边距的几种方法，包括设置各方向的间距以及默认间距。同时，通过Spacer实现视图的水平和垂直堆栈布局，以达到推挤和间隔效果。此外，还介绍了Initializer的使用，通过自定义结构体初始化来设置视图的颜色和内容。

摘要由CSDN通过智能技术生成

1. Padding 的使用

1.1 样式一

1) 实现

func testText1()-> some View{
    Text("Hello, World!")
        .background(Color.yellow) // 背景颜色
        //.padding()              // 默认间距
        .padding(.all, 10)        // 所有的间距
        .padding(.leading, 20)    // 开始的间距
        .background(Color.blue)   // 背景
}

2) 效果图:

1.2 文本样式 2

1) 实现

/// 文本样式 2
func testText2()-> some View{
    Text("Hell, World!")
        .font(.largeTitle)     // 字体大小
        .fontWeight(.semibold) // 权重
        .frame(maxWidth: .infinity, alignment: .leading) // 宽，对齐方式
        .background(Color.red) // 颜色
        .padding(.leading, 30) // 间距
}

2) 效果图:

1.3 文本样式 3

1) 实现

/// 文本样式 3
func testTest3()->some View{
    VStack(alignment: .leading) {
        Text("Hell, World!")
            .font(.largeTitle)     // 字体大小
            .fontWeight(.semibold) // 权重样式
            .padding(.bottom, 20)  // 向下间距
        
        Text("This is the description of what we will do on this screen. It is multiple lines and we will align the text to the leading edge.") // 文本
    }
    .padding() // 默认间距
    .padding(.vertical, 10) // 垂直间距
    .background(
        Color.white
            .cornerRadius(10)
            .shadow(color: Color.black.opacity(0.3), radius: 10, x: 0.0, y: 10)
    ) // 背景: 圆角，阴影
    .padding(.horizontal, 10) // 水平间距
}

2) 效果图:

2. Spacer 的使用

2.1 垫片水平堆栈

1) 实现

// 垫片水平堆栈
func spacerHStack() -> some View{
    HStack(spacing: 0){
        //垫片，将控件向两边推 nil == 8/10
        Spacer(minLength: 0)
            .frame(height: 10)
            .background(Color.orange)
        Rectangle()
            .frame(width: 50, height: 50) // 矩形
        Spacer()
            .frame(height: 10)
            .background(Color.orange)
        Rectangle()
            .fill(Color.red)
            .frame(width: 50, height: 50)
        Spacer()
            .frame(height: 10)
            .background(Color.orange)
        Rectangle()
            .fill(Color.green)
            .frame(width: 50, height: 50)
        //垫片，将控件向两边推
        Spacer()
            .frame(height: 10)
            .background(Color.orange)
    }
    .background(Color.yellow)
    //.padding(.horizontal, 200)
    .background(Color.blue)
}

2) 效果图:

2.2 垫片 VH 堆栈

1) 实现

// 垫片 VH 堆栈
func spacerVHStack() -> some View{
    VStack {
        HStack(spacing: 0){
            Image(systemName: "xmark") // 图片
            Spacer()// 垫片
                .frame(height: 2)
                .background(Color.orange)
            Image(systemName: "gear")  // 图片
        }
        .font(.title)
        //.background(Color.yellow)
        .padding(.horizontal)
        //.background(Color.blue)
        
        Spacer()// 垫片
            .frame(width: 2)
            .background(Color.orange)
        
        Rectangle()
            .frame(height: 55)
    }
    //.background(Color.yellow)
}

2) 效果图:

3. Initializer 的使用

3.1 实现

/// 初始化与枚举
struct InitializerBootcamp: View {
    let backgroundColor: Color
    let count: Int
    let title: String
    
    init(count: Int, fruit: Fruit) {
        self.count = count;
        if fruit == .apple{
            self.title = "Apples"
            self.backgroundColor = .red
        }else{
            self.title = "Oranges"
            self.backgroundColor = .orange
        }
    }
    
    /// 枚举
    enum Fruit{
        case apple
        case orange
    }
    
    var body: some View {
        // 垂直堆栈
        VStack(spacing: 15){
            Text("\(count)")
                .font(.largeTitle)
                .foregroundColor(.white)
                .underline()
            
            Text(title)
                .font(.headline)
                .foregroundColor(.white)
        }
        .frame(width: 150, height: 150)
        .background(backgroundColor)
        .cornerRadius(10)
    }
}

struct InitializerBootcamp_Previews: PreviewProvider {
    static var previews: some View {
        HStack {
            InitializerBootcamp(count: 58, fruit: .orange)
            InitializerBootcamp(count: 23, fruit: .apple)
        }
    }
}