SwiftUI内功之Overlay 与 Background

Overlay and Background

覆盖和背景修饰符也是布局系统的重要组成部分。当我们编写content.overlay(other)时,系统会创建一个带有两个子元素的overlay修饰符:content和other

布置overlay修改器后,建议的尺寸将传递给内容。然后,将内容报告的大小作为建议大小传递给其他人。 overlay修改器将内容的大小作为其自身大小报告回去;换句话说,其他的报告大小将被忽略。布局的实现如下所示:

extension Overlay {
func layout(in proposedSize: ProposedSize) -> CGSize {
let backgroundSize = background.layout(proposedSize: proposedSize) _ = foreground.layout(proposedSize: ProposedSize(
width: backgroundSize.width, height: backgroundSize.height))
// ...
return backgroundSize }
}

对于content.background(other),其过程几乎相同,除了现在在内容后面绘制了other。请务必注意,content.overlay(other)是不同的与other.background(content)一样:在前一种情况下,将内容的大小作为布局大小返回,而在后一种情况下,将返回other的大小.

与形状结合使用时,覆盖层和背景通常很有用。例如,这是一个覆盖层,可在文本周围绘制胶囊形状而不影响布局

Text("Hello").background( Capsule()
.stroke()
.padding(-5) )

让我们考虑绘制一个圆形按钮,类似于iOS内置秒表中的按钮。初次尝试时,我们可能将圆圈绘制为文本的.background


Text("Hello,World!") 
.foregroundColor(.white) 
.background(Circle().􏰀fill(Color.blue))

在上面的代码中运行时,我们会看到一个与文字一样高的小圆圈。尽管这不是我们希望的结果,但这种行为是有道理的:首先对文本进行大小调整,然后在文本的大小内绘制圆圈。默认情况下,圆适合自己的可用空间(以宽度和高度中的最小值作为直径)

取而代之的是,我们可以将文本绘制为圆圈上的叠加层,并且可以为圆圈指定明确的宽度和高度:

import SwiftUI

struct ContentView: View {
    var body: some View {
        Circle()
            .fill(Color.blue)
            .overlay(Text("Start").foregroundColor(.white))
            .frame(width:75,height:75)
    }
}
41085-d97b7e0224292078.png
image.png

理想情况下,如果文本不适合,按钮也将变大。要实现这个需求,我们需要一些高级技。
我们还可以进行有多个方式的叠加层。例如,我们可以绘制相同的按钮,并在其中插入一个稍微小的圆圈,将其插入几个点

import SwiftUI

struct ContentView: View {
    var body: some View {
        Circle()
            .fill(Color.blue)
            .overlay(Circle().strokeBorder(Color.white).padding(3))
            .overlay(Text("Start").foregroundColor(.white))
            .frame(width:75,height:75)
    }
}

41085-89b8f499ae441656.png
image.png

技术交流

QQ:3365059189
SwiftUI技术交流QQ群:518696470

版权声明:本文为iCloudEnd原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/iCloudEnd/article/details/105024087