如何在 SwiftUI 中使用渐变填充形状

Posted 2023-03-10

【中文标题】如何在 SwiftUI 中使用渐变填充形状

【英文标题】：How to fill shape with Gradient in SwiftUI

【发布时间】：2019-06-07 05:45:12

【问题描述】：

如何在 SwiftUI 中将 LinearGradient 传递给形状（例如矩形）just？

Rectangle().frame(width: UIScreen.main.bounds.width, height: 200)

【问题讨论】：

Rectangle.fill 和 Rectangle.fill（是的，它们略有不同，因此您需要查看它们并决定哪个满足您的需求）

@MadProgrammer 谢谢，在你回答之前，我发现填充方法应该被称为第一个添加的东西，我试图将它用作第二个参数。

@MadProgrammer 两个 Rectangle.fill 链接都已损坏。

@drewster 还好它只是一条评论——你可以只搜索“SwiftUI 矩形”

【参考方案1】：

这应该有效：

static let gradientStart = Color(red: 239.0 / 255, green: 120.0 / 255, blue: 221.0 / 255)
static let gradientEnd = Color(red: 239.0 / 255, green: 172.0 / 255, blue: 120.0 / 255)

var body: some View 
  Rectangle()
    .fill(LinearGradient(
      gradient: .init(colors: [Self.gradientStart, Self.gradientEnd]),
      startPoint: .init(x: 0.5, y: 0),
      endPoint: .init(x: 0.5, y: 0.6)
    ))
    .frame(width: 300, height: 200)

【讨论】：

你能解释一下startPoint和endPoint中的x和y是什么意思吗？只是与0 -> 0.6略有不同，它所依赖的位置。

【参考方案2】：

SwiftUI

这是一个可能的解决方案。

struct TestSwiftUIView: View 
    let uiscreen = UIScreen.main.bounds

    var body: some View 
        Rectangle()
        .fill(
            LinearGradient(gradient: Gradient(colors: [Color.clear, Color.black]),
                           startPoint: .top,
                           endPoint: .bottom))
        .frame(width: self.uiscreen.width,
               height: self.uiscreen.height,
               alignment: .center)
    

这段代码 sn-p 会产生这样的屏幕：

startPoint 和 endPoint 是 UnitPoint。对于 UnitPoints，您有以下选项：

.zero

.center

.leading

.trailing

.top

.bottom

.topLeading

.topTrailing

.bottomLeading

.bottomTrailing

【参考方案3】：

Rectangle().frame(width: UIScreen.main.bounds.width, height: 200) // You original code

.overlay(
    LinearGradient(gradient: Gradient(colors: [.red, .purple]), startPoint: .top, endPoint: .bottom))
)

注意：

当您将叠加层应用到视图时，原始视图会继续为结果视图提供布局特征。

【参考方案4】：

从 beta 6 开始，您必须先将 forgroundColor 设置为清除。

Rectangle()
    .foregroundColor(.clear)
    .background(LinearGradient(gradient:  Gradient(colors: [Color("gradient1"), Color("gradient2")]), startPoint: .top, endPoint: .bottom))