Frame, BackgroundAndOverlay 的使用

1. Frame 的使用

  1.1 实现

//.background(Color.green) // 文本背景
//.frame(width: 300, height: 300, alignment: .topLeading) // 设置区域宽高，对齐方式
//.frame(maxWidth: .infinity, maxHeight: .infinity,  alignment: .center) // 最小宽度 最小理想宽度，最大宽度 .infinity: 无穷大宽度，在父区域内尽可能大
//.background(Color.red) // 设置背景颜色

// 区域位置
Text("Hello, World!")
    .background(Color.red)// 背景
    .frame(height: 100, alignment: .top) // 区域: height：设置下 背景高度 alignment: 设置上 布局对齐方式
    .background(Color.orange)
    .frame(width: 150)
    .background(Color.purple)
    .frame(maxWidth: .infinity, alignment: .leading)
    .background(Color.pink)
    .frame(height: 400)
    .background(Color.green)
    .frame(maxHeight: .infinity, alignment: .top)
    .background(Color.yellow)

  1.2 效果图:

2. BackgroundAndOverlay 的使用

  2.1 文字

    1) 实现

/// 自定义文字背景为渐变色圆
func testText() ->some View{
    Text("Hello, World!")
        .background(
            // Color.red  // 颜色
            // LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .leading, endPoint: .trailing) // 渐变
            // 圆
            Circle()
                .fill(LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .leading, endPoint: .trailing)) // 填充
                .frame(width: 100, height: 100, alignment: .center) // 宽，高，对齐方式
        )// 背景
        .background(
            // 圆
            Circle()
                .fill(LinearGradient(gradient: Gradient(colors: [Color.blue, Color.red]), startPoint: .leading, endPoint: .trailing)) // 填充
                .frame(width: 120, height: 120, alignment: .center) // 宽，高，对齐方式
        ) // 背景
}

    2) 效果图:

  2.2 圆中文字

    1) 实现

/// 圆中添加文字
func testCircle()-> some View{
    Circle()
        .fill(Color.pink)
        .frame(width: 100, height: 100)
        .overlay(
            Text("1")
                .font(.largeTitle)
                .foregroundColor(.white)
        ) // Overlay :在什么之上，叠加层
        .background(
            Circle()
                .fill(Color.purple)
                .frame(width: 110, height: 110)
        )// 紫色背景在红色背景之后
}

    2) 效果图:

  2.3 矩形背景

    1) 实现

/// 矩形背景
func testRectangle() -> some View{
    Rectangle() // 矩形
        .frame(width: 100, height: 100)
    // 覆盖
        .overlay(
            Rectangle()
                .fill(Color.blue)
                .frame(width: 50, height: 50)
            , alignment: .topLeading
        ) // 覆盖一个矩形
    // 背景
        .background(
            Rectangle()
                .fill(Color.red)
                .frame(width: 150, height: 150)
            , alignment: .bottomTrailing) // 添加一个背景矩形
}

    2) 效果图:

  2.4 图片设置背景

    1) 实现

/// 图片设置背景
func testImage() -> some View{
    Image(systemName: "heart.fill") // 设置系统图标
        .font(.system(size: 40))    // 设置大小
        .foregroundColor(.white)    // 设置颜色
        .background(
            Circle()
                .fill(
                    LinearGradient(
                        gradient: Gradient(colors: [Color(#colorLiteral(red: 0.5568627715, green: 0.3529411852, blue: 0.9686274529, alpha: 1)), Color(#colorLiteral(red: 0.3647058904, green: 0.06666667014, blue: 0.9686274529, alpha: 1))]),
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing) // 线性渐变
                ) // 设置填充样式
                .frame(width: 100, height: 100) //设置大小
                .shadow(color: Color(#colorLiteral(red: 0.3647058904, green: 0.06666667014, blue: 0.9686274529, alpha: 0.5)), radius: 10, x: 0.0, y: 10) // 设置阴影
                .overlay(
                    Circle()
                        .fill(.blue) // 填充
                        .frame(width: 35, height: 35) //大小
                        .overlay(
                            Text("5")
                                .font(.headline)         // 大字标题
                                .foregroundColor(.white) // 白色
                        )
                        .shadow(color: Color(#colorLiteral(red: 0.3647058904, green: 0.06666667014, blue: 0.9686274529, alpha: 0.5)), radius: 10, x: 5, y: 5) // 设置阴影
                    , alignment: .bottomTrailing)
        )// 设置背景
}

    2) 效果图: