Gradients/渐变, Icons/图标, Image/图片 的使用

1. Gradients 的使用

  1.1 实现

RoundedRectangle(cornerRadius: 25) // 圆角矩形
    .fill(
        //Color.red
        //#colorLiteral() 手动输入 才能弹出颜色选择框
        
        //线性渐变
        //LinearGradient(
        //    gradient: Gradient(colors: [Color(#colorLiteral(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1)), Color(#colorLiteral(red: 0.1411764771, green: 0.3960784376, blue: 0.5647059083, alpha: 1))]),
        //    startPoint: .topLeading,
        //    endPoint: .bottom)
        
        // 中心圆向外扩散渐变
        //RadialGradient(
        //    gradient: Gradient(colors: [Color.red, Color.blue]),
        //    center: .center,
        //    startRadius: 5,
        //    endRadius: 200)
        
        // 渐变中心并带有角度的补全
        AngularGradient(
            gradient: Gradient(colors: [Color.red, Color.blue]),
            center: .topLeading,
            angle: .degrees(180 + 45))
    )
    .frame(width: 300, height: 200)

  1.2 效果图:

2. Icons 的使用

  2.1 系统图标官方网址:Apple design resourceshttps://developer.apple.com/design/resources/

  2.2 网页下载 SF Symbols 软件，里包含常见的所有图标，如图: 

  2.3 实现

Image(systemName: "person.fill.badge.plus") // 引用系统图标 heart.fill
    .renderingMode(.original) // 渲染模式: 原来的
    .font(.largeTitle) // 设置大小
    //.resizable()     // 自动更新，适配 frame 的大小
    // fill: 填充  fit: 适应，作用保持图像的比例
    //.aspectRatio(contentMode: .fit) // 搭配 clipped 使用，调整大小的纵横比
    //.scaledToFit()  // 调用缩放以适应 和 .fit 相同
    //.scaledToFill() // 调用缩放以填充 和 .fill 相同
    //.font(.caption) // 设置大小，推荐使用，因为设置系统默认的类型，会随着设备系统尺寸而动态的变化大小
    //.font(.system(size: 100))   // 设置特定的大小
    //.foregroundColor(Color.red) // 设置颜色
    //.frame(width: 300, height: 300) // 设置大小
    //.clipped(); // 设置裁剪，图像不能超过 frame 区域

  2.4 效果图:

3. Image 的使用

  3.1 使用的图片 google.png，therock.png

  3.2 实现

//therock
Image("google")
    .renderingMode(.template) // 渲染模式:模版图像，更改单一平面颜色
    .resizable() // 自动更新，适配区域大小
// fill: 填充模式,会越界按比例显示完整图像，搭配 clipped 裁剪超出 frame 区域;
// fit:  可以单独使用，自适应 frame 区域，不会越界显示
//.aspectRatio(contentMode: .fit) // 纵横比，修复图像，
    .scaledToFit() // 缩放填充显示，与 .fit 使用一样的效果
    .frame(width: 300, height: 200) // 设置宽和高
    .foregroundColor(.green) // 设置颜色
//.clipped()         // 搭配 fill 使用，裁剪填充 frame 区域越界部分
//.cornerRadius(150) // 设置圆角，经常用到这个方法，设置成圆形头像，圆角等于正方形边长的 0.5 倍
//.clipShape(
//Circle() // 裁剪成圆
//RoundedRectangle(cornerRadius: 25.0) // 裁剪成圆角矩形
//Ellipse() // 裁剪成椭圆
//) // 裁剪形状

  3.2 效果图