SwiftUI组件基本用法

Text的基本用法

struct TextView: View {
    var body: some View {
        Text("Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World")
            // 设置文字大小
            .font(.title)
            // 设置文字粗细
            .fontWeight(.heavy)
            // 设置文字下划线
            .underline(true,pattern: .dot,color: .red)
            // 设置文字斜体
            .italic(true)
            // 设置文字中横线
            .strikethrough(true,color: .green)
            // 设置文字大小，样式，粗细
            .font(.system(.title2,design: .monospaced,weight: .medium))
            // 多行文字居左显示
            .multilineTextAlignment(.leading)
            // 单个字符的间距
            .kerning(5)
            // 文字的颜色
            .foregroundColor(.pink)
            // 布局范围
            .frame(width: 200,height: 200,alignment: .leading)
            // 文字在布局范围内自适应
            .minimumScaleFactor(0.1)
    }
}

形状的基本用法

struct ShapeView: View {
    var body: some View {
        // 圆形
//        Circle()
        // 椭圆形
//        Ellipse()
        // 按钮形状
//        Capsule(style: .continuous)
        // 矩形
//        Rectangle()
        // 矩形 设置圆角 20
        RoundedRectangle(cornerRadius: 20)
            // 设置颜色
//            .fill(.red)
//            .foregroundColor(.pink)
            // 边框宽为5
//            .stroke(.blue,lineWidth: 5)
            // 边框样式 由20个虚线组成的圆
//            .stroke(.green, style: StrokeStyle(lineWidth: 10,lineCap: .butt,lineJoin: .bevel,dash: [20]))
            // 半圆 大半圆
//            .trim(from: 0.2,to: 0.8)
//            .stroke(.blue,lineWidth: 5)
            .frame(width: 200,height: 100)

            
    }
}

渐变色

 RoundedRectangle(cornerRadius: 20)
            .fill(
                // 线性渐变
//                LinearGradient(colors: [.red,.blue], startPoint: .leading, endPoint: .trailing)
                // 发散性渐变
//                RadialGradient(gradient: Gradient(colors: [.red,.blue]), center: .center, startRadius: 100, endRadius: 300)
                // 角度性渐变
                AngularGradient(colors: [.red,.blue], center: .leading, startAngle: .degrees(0), endAngle: .degrees(300))
            )
            .frame(width: 300,height: 200)

图片设置

Image("qidongtu")
//            .renderingMode(.template)
        // 图片原尺寸
            .resizable()
        // 图片宽高比 和 展示形式
//            .aspectRatio(1.5, contentMode: .fill)
        // 适应图片尺寸
            .scaledToFit()
        // 范围撑满
//            .scaledToFill()
            .frame(width: 100,height: 100)
        // 当设置图片 renderingMode(.template) 时 可以修改图片的颜色
//            .foregroundColor(.red)
        // 图片裁剪
            .clipped()