为什么在 SwiftUI 中添加框架修饰符后 RadialGradient 失去了它的内容

huangapple go评论58阅读模式
英文:

Why RadialGradient loses it's content after adding frame modifier in swiftUI

问题

我不明白为什么 SwiftUI 中的 RadialGradient 不会根据其框架边界进行渲染。我是否理解错了?当我添加框架修饰符时,我失去了渐变的其余部分。

RadialGradient(
    gradient: Gradient(stops: [
        .init(color: Color(#colorLiteral(red: 0.16470588743686676, green: 0.16078431904315948, blue: 0.18039216101169586, alpha: 1)), location: 0.09757862240076065),
        .init(color: Color(#colorLiteral(red: 0.6392157077789307, green: 0.6313725709915161, blue: 0.6784313917160034, alpha: 1)), location: 0.23651380836963654),
        .init(color: Color(#colorLiteral(red: 0.8039215803146362, green: 0.800000011920929, blue: 0.8196078538894653, alpha: 1)), location: 0.37247714400291443),
        .init(color: Color(#colorLiteral(red: 0.46666666865348816, green: 0.4588235318660736, blue: 0.5215686559677124, alpha: 1)), location: 0.506211519241333)
    ]),
    center: .center,
    startRadius: 5.671257848810516,
    endRadius: 567.1257848810516
)
.frame(width: 200, height: 200)

为什么在 SwiftUI 中添加框架修饰符后 RadialGradient 失去了它的内容

英文:

I do not understand why RadialGradient in swiftUI does not render itself according to it's frame boundaries. Am I misunderstanding something ? When I add frame modifier, I'm losing the rest of the gradient.

RadialGradient(
            gradient: Gradient(stops: [
                .init(color: Color(#colorLiteral(red: 0.16470588743686676, green: 0.16078431904315948, blue: 0.18039216101169586, alpha: 1)), location: 0.09757862240076065),
                .init(color: Color(#colorLiteral(red: 0.6392157077789307, green: 0.6313725709915161, blue: 0.6784313917160034, alpha: 1)), location: 0.23651380836963654),
                .init(color: Color(#colorLiteral(red: 0.8039215803146362, green: 0.800000011920929, blue: 0.8196078538894653, alpha: 1)), location: 0.37247714400291443),
                .init(color: Color(#colorLiteral(red: 0.46666666865348816, green: 0.4588235318660736, blue: 0.5215686559677124, alpha: 1)), location: 0.506211519241333)]),
            center: .center,
            startRadius: 5.671257848810516,
            endRadius: 567.1257848810516
        )
        .frame(width: 200, height: 200)

为什么在 SwiftUI 中添加框架修饰符后 RadialGradient 失去了它的内容

答案1

得分: 0

// `endRadius` 是一个绝对值,所以如果你希望渐变效果适应框架内部,那么 `endRadius` 需要 <= 宽度的一半:

RadialGradient(gradient: Gradient(stops: [
    .init(color: Color(#colorLiteral(red: 0.16470588743686676, green: 0.16078431904315948, blue: 0.18039216101169586, alpha: 1)), location: 0.09757862240076065),
    .init(color: Color(#colorLiteral(red: 0.6392157077789307, green: 0.6313725709915161, blue: 0.6784313917160034, alpha: 1)), location: 0.23651380836963654),
    .init(color: Color(#colorLiteral(red: 0.8039215803146362, green: 0.800000011920929, blue: 0.8196078538894653, alpha: 1)), location: 0.37247714400291443),
    .init(color: Color(#colorLiteral(red: 0.46666666865348816, green: 0.4588235318660736, blue: 0.5215686559677124, alpha: 1)), location: 0.506211519241333)]),
               center: .center,
               startRadius: 5.671257848810516,
               endRadius: 100
)
.frame(width: 200, height: 200)

为什么在 SwiftUI 中添加框架修饰符后 RadialGradient 失去了它的内容


<details>
<summary>英文:</summary>

The `endRadius` is an absolute value, so if you want the gradient to fit inside the frame, then the `endRadius` needs to be &lt;= width / 2:

RadialGradient(gradient: Gradient(stops: [
.init(color: Color(#colorLiteral(red: 0.16470588743686676, green: 0.16078431904315948, blue: 0.18039216101169586, alpha: 1)), location: 0.09757862240076065),
.init(color: Color(#colorLiteral(red: 0.6392157077789307, green: 0.6313725709915161, blue: 0.6784313917160034, alpha: 1)), location: 0.23651380836963654),
.init(color: Color(#colorLiteral(red: 0.8039215803146362, green: 0.800000011920929, blue: 0.8196078538894653, alpha: 1)), location: 0.37247714400291443),
.init(color: Color(#colorLiteral(red: 0.46666666865348816, green: 0.4588235318660736, blue: 0.5215686559677124, alpha: 1)), location: 0.506211519241333)]),
center: .center,
startRadius: 5.671257848810516,
endRadius: 100
)
.frame(width: 200, height: 200)


[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/dbDhS.png



</details>



huangapple
  • 本文由 发表于 2023年2月23日 20:04:25
  • 转载请务必保留本文链接:https://go.coder-hub.com/75544595.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定