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)
    }
}

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)
    }
}

image.png

技术交流

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

• 请关注我的专栏icloudend, SwiftUI教程与源码
  https://www.jianshu.com/c/7b3e3b671970