英文:
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)
英文:
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)
答案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)
<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 <= 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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论