zoukankan      html  css  js  c++  java
  • SwiftUI 渐变色

    • 渐变探索
    // 线性渐变
    LinearGradient(gradient: Gradient(colors: [.red,.green]), startPoint: UnitPoint.topLeading, endPoint: UnitPoint.bottomTrailing)
                .frame( 200, height: 200)
    // 角度渐变
    AngularGradient(gradient: Gradient(colors: [.red,.green]), center: UnitPoint.center).frame( 200, height: 200)
    
    // 半径渐变
    RadialGradient(gradient: Gradient(colors: [.red,.green]), center: UnitPoint.center, startRadius:1, endRadius: 100)
                .frame( 200, height: 200)    }

    LinearGradien:

    使用LinearGradien绘制线形颜色渐变的背景。 示例代码:

    Text("SwifUI Gradient")
        .font(.system(size: 36))
        .padding()
        .foregroundColor(.white)
        .background(LinearGradient(gradient: Gradient(colors: [.orange, .red, .purple]), startPoint: .topLeading, endPoint: .bottomTrailing))
    
    }

    AngularGradient:

    使用AngularGradient绘制角度颜色渐变的背景。 示例代码:

    VStack{
        Text("SwifUI Gradient")
        .font(.system(size: 36))
        .padding()
        .foregroundColor(.white)
        .background(AngularGradient(gradient: Gradient(colors: [.orange, .red, .purple]), center: UnitPoint(x: 0.5, y: 0.5), angle: Angle.init(degrees: -45)))
    
        Text("SwifUI Gradient")
        .font(.system(size: 36))
        .padding()
        .foregroundColor(.white)
        .background(AngularGradient(gradient: Gradient(colors: [.orange, .red, .purple]), center: UnitPoint(x: 0.5, y: 0.5), startAngle: Angle.init(degrees: 0), endAngle: Angle.init(degrees: 0)))
    
    }

    RadialGradient:

    使用RadialGradient绘制径向颜色渐变的背景。 示例代码:

    Text("SwifUI Gradient")
        .font(.system(size: 36))
        .padding()
        .foregroundColor(.white)
        .background(RadialGradient(gradient: Gradient(colors: [.orange, .red, .purple]), center: .init(x: 0.5, y: 0.5), startRadius: CGFloat(10), endRadius: CGFloat(120)))
    
    }
  • 相关阅读:
    HTTP的KeepAlive是开启还是关闭?
    JS中关于in运算符的问题
    关于jQuery的inArray 方法介绍
    JS中括号的用法
    关于js中for in的缺陷浅析
    Ajax datatype:'JSON'的error问题Status1:200,JSON格式
    windows 如何查看端口占用情况?
    确认过眼神,看清 HTTP 协议
    高考完?入门级的开源项目带你开启编程之旅
    MongoDB入门系列(四):权限管理
  • 原文地址:https://www.cnblogs.com/liuxiaokun/p/12676824.html
Copyright © 2011-2022 走看看