SwiftUI 查看尺寸（父/子关系）

Question

我正在通过一些示例来熟悉 SwiftUI，但我遇到了尺寸问题。

我已经习惯了 UIKit 处理调整视图大小的方式，使用 AutoLayout 您基本上可以为其子级设置父级大小。 SwiftUI 似乎不是这种情况。

我读过的所有内容都显示了如何在孩子上使用 GeometryReader 来获取其父母的大小，然后孩子可以选择自己的大小，但我还没有看到如何从父母那里获得孩子的大小.

假设我有以下代码：

struct ContentView: View {
    var body: some View {
        Text("This is Text").ripple(rippleColor: .lightGray, rippleOpacity: 0.5)
    }
}

ipple ripple()是 function 的扩展，它添加了一个自定义ViewModifier ，该 ViewModifier 将内容覆盖到UIViewRepresentable视图上，以便在点击时创建材质波纹效果。

struct RippleModifier: ViewModifier {
    let rippleColor: UIColor
    let rippleOpacity: Float

    func body(content: Content) -> some View {
        RippleView(
            rippleColor: rippleColor,
            rippleOpacity: rippleOpacity
        )
        .overlay(content)
    }
}

extension View {
    func ripple(rippleColor: UIColor, rippleOpacity: Float) -> some View {
        modifier(
            RippleModifier(
                rippleColor: rippleColor,
                rippleOpacity: rippleOpacity
            )
        )
    }
}

我遇到的问题是，当我只有Text时，它会将其框架设置为适合其内容（字符串）。 当我向它添加.ripple()修饰符时，框架就会变成整个屏幕。

使用 UIKit，我只需添加一些约束来将 UILabel 固定到父级，我会让它决定父级的大小。

有没有办法处理 SwiftUI？

奖金问题：

相关但不相关，我如何让Text上的点击进入它覆盖的视图？ 当点击视图框架内的任何位置时，波纹将激活并正确动画，但直接点击文本本身除外。

编辑：

这是 UIViewRepresentable 视图的部分代码。

struct RippleView: UIViewRepresentable {
    var rippleColor: UIColor = .systemGray
    var rippleOpacity: Float = 0.5

    func makeUIView(context: Context) -> UIRippleView {
        UIRippleView()
    }

    func updateUIView(
        _ uiView: UIRippleView,
        context: UIViewRepresentableContext<RippleView>
    ) {
        uiView.rippleColor = rippleColor
        uiView.rippleOpacity = rippleOpacity
    }
}

open class UIRippleView: UIView {
    open var rippleColor: UIColor = .systemGray {
        didSet {
            rippleLayer.fillColor = rippleColor.cgColor
        }
    }

    open var rippleOpacity: Float = 0.5 {
        didSet {
            rippleLayer.opacity = rippleOpacity
        }
    }

    private lazy var rippleLayer: CAShapeLayer = {
        let layer = CAShapeLayer()
        layer.opacity = 0.0

        self.layer.insertSublayer(layer, at: 0)

        return layer
    }()

    public override init(frame: CGRect) {
        super.init(frame: frame)
        clipsToBounds = true
    }

    public required init?(coder: NSCoder) {
        super.init(coder: coder)
        clipsToBounds = true
    }
}

该视图有一个扩展，它覆盖了触摸函数来计算点击发生的位置并执行动画，但这只是修改了rippleLayer的path 。

Answer 1

您可以像这样将overlay更改为background ：

struct RippleModifier: ViewModifier {
    let rippleColor: UIColor
    let rippleOpacity: Float

    func body(content: Content) -> some View {
        content.background(
            RippleView(
                rippleColor: rippleColor,
                rippleOpacity: rippleOpacity
        ))
    }
}

所以RippleView从content中获取大小约束，而不是相反。