我正在尝试重新创建 Twitter iOS 应用程序的一部分以学习 SwiftUI，并且想知道如何动态地将一个 View 的宽度更改为另一个 View 的宽度。在我的例子中，下划线的宽度与 TextView 的宽度相同。

我已附上屏幕截图，以尝试更好地解释我所指的内容。任何帮助将不胜感激，谢谢!

这也是我目前的代码:

import SwiftUI

struct GridViewHeader : View {

    @State var leftPadding: Length = 0.0
    @State var underLineWidth: Length = 100

    var body: some View {
        return VStack {
            HStack {
                Text("Tweets")
                    .tapAction {
                        self.leftPadding = 0

                }
                Spacer()
                Text("Tweets & Replies")
                    .tapAction {
                        self.leftPadding = 100
                    }
                Spacer()
                Text("Media")
                    .tapAction {
                        self.leftPadding = 200
                }
                Spacer()
                Text("Likes")
            }
            .frame(height: 50)
            .padding(.horizontal, 10)
            HStack {
                Rectangle()
                    .frame(width: self.underLineWidth, height: 2, alignment: .bottom)
                    .padding(.leading, leftPadding)
                    .animation(.basic())
                Spacer()
            }
        }
    }
}

最佳答案

我已经写了关于使用 GeometryReader、 View 首选项和 anchor 首选项的详细说明。下面的代码使用了这些概念。有关它们如何工作的更多信息，请查看我发布的这篇文章:https://swiftui-lab.com/communicating-with-the-view-tree-part-1/

下面的解决方案将正确地为下划线设置动画:

我努力完成这项工作，我同意你的看法。有时，您只需要能够向上或向下传递层次结构，一些框架信息。事实上，WWDC2019 session 237(使用 SwiftUI 构建自定义 View )解释了 View 不断地传达它们的大小。它基本上是说 parent 向 child 建议尺寸， child 决定他们想要如何布局自己并与 parent 沟通。他们是怎么做到的？我怀疑 anchorPreference 与它有关。然而，它非常晦涩，根本没有记录在案。 API 已公开，但要了解那些长函数原型(prototype)的工作原理……我现在没有时间去了解它。

我认为 Apple 没有记录这一点是为了迫使我们重新思考整个框架并忘记“旧的”UIKit 习惯并开始以声明方式思考。但是，有时仍然需要这样做。你有没有想过背景修饰符是如何工作的？我很想看到那个实现。这会解释很多!我希望 Apple 能在不久的将来记录偏好。我一直在试验自定义 PreferenceKey，它看起来很有趣。

现在回到您的具体需求，我设法解决了它。您需要两个维度(文本的 x 位置和宽度)。一个我得到它公平公正，另一个似乎有点黑客。尽管如此，它仍能完美运行。

我通过创建自定义水平对齐方式解决了文本的 x 位置。有关该检查 session 237(19:00 分钟)的更多信息。虽然我建议您观看整个过程，但它对布局过程的工作原理提供了很多启发。

然而，我并不为宽度感到骄傲……;-) 它需要 DispatchQueue 来避免在显示时更新 View 。 更新:我在下面的第二个实现中修复了它

第一次实现

extension HorizontalAlignment {
    private enum UnderlineLeading: AlignmentID {
        static func defaultValue(in d: ViewDimensions) -> CGFloat {
            return d[.leading]
        }
    }

    static let underlineLeading = HorizontalAlignment(UnderlineLeading.self)
}


struct GridViewHeader : View {

    @State private var activeIdx: Int = 0
    @State private var w: [CGFloat] = [0, 0, 0, 0]

    var body: some View {
        return VStack(alignment: .underlineLeading) {
            HStack {
                Text("Tweets").modifier(MagicStuff(activeIdx: $activeIdx, widths: $w, idx: 0))
                Spacer()
                Text("Tweets & Replies").modifier(MagicStuff(activeIdx: $activeIdx, widths: $w, idx: 1))
                Spacer()
                Text("Media").modifier(MagicStuff(activeIdx: $activeIdx, widths: $w, idx: 2))
                Spacer()
                Text("Likes").modifier(MagicStuff(activeIdx: $activeIdx, widths: $w, idx: 3))
                }
                .frame(height: 50)
                .padding(.horizontal, 10)
            Rectangle()
                .alignmentGuide(.underlineLeading) { d in d[.leading]  }
                .frame(width: w[activeIdx],  height: 2)
                .animation(.linear)
        }
    }
}

struct MagicStuff: ViewModifier {
    @Binding var activeIdx: Int
    @Binding var widths: [CGFloat]
    let idx: Int

    func body(content: Content) -> some View {
        Group {
            if activeIdx == idx {
                content.alignmentGuide(.underlineLeading) { d in
                    DispatchQueue.main.async { self.widths[self.idx] = d.width }

                    return d[.leading]
                }.onTapGesture { self.activeIdx = self.idx }

            } else {
                content.onTapGesture { self.activeIdx = self.idx }
            }
        }
    }
}

更新:不使用 DispatchQueue 的更好实现

我的第一个解决方案可行，但我对将宽度传递给下划线 View 的方式不太满意。

我找到了实现相同目标的更好方法。事实证明，background 修饰符非常强大。它不仅仅是一个可以让您装饰 View 背景的修饰符。

基本步骤是:

1. 使用 Text("text").background(TextGeometry())。 TextGeometry 是一个自定义 View ，其父 View 的大小与 TextView 相同。这就是 .background() 所做的。非常强大。
2. 在我的 TextGeometry 实现中，我使用 GeometryReader 来获取父级的几何形状，这意味着我获得了 TextView 的几何形状，这意味着我现在有了宽度。
3. 现在要传回宽度，我正在使用首选项。关于它们的文档为零，但经过一些实验后，我认为如果您愿意，首选项类似于“ View 属性”。我创建了我的自定义 PreferenceKey，称为 WidthPreferenceKey，我在 TextGeometry 中使用它来将宽度“附加”到 View ，因此它可以在层次结构的较高位置读取。
4. 回到祖先，我使用 onPreferenceChange 来检测宽度的变化，并相应地设置宽度数组。

这听起来可能太复杂了，但代码最能说明问题。这是新的实现:

import SwiftUI

extension HorizontalAlignment {
    private enum UnderlineLeading: AlignmentID {
        static func defaultValue(in d: ViewDimensions) -> CGFloat {
            return d[.leading]
        }
    }

    static let underlineLeading = HorizontalAlignment(UnderlineLeading.self)
}

struct WidthPreferenceKey: PreferenceKey {
    static var defaultValue = CGFloat(0)

    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }

    typealias Value = CGFloat
}


struct GridViewHeader : View {

    @State private var activeIdx: Int = 0
    @State private var w: [CGFloat] = [0, 0, 0, 0]

    var body: some View {
        return VStack(alignment: .underlineLeading) {
            HStack {
                Text("Tweets")
                    .modifier(MagicStuff(activeIdx: $activeIdx, idx: 0))
                    .background(TextGeometry())
                    .onPreferenceChange(WidthPreferenceKey.self, perform: { self.w[0] = $0 })

                Spacer()

                Text("Tweets & Replies")
                    .modifier(MagicStuff(activeIdx: $activeIdx, idx: 1))
                    .background(TextGeometry())
                    .onPreferenceChange(WidthPreferenceKey.self, perform: { self.w[1] = $0 })

                Spacer()

                Text("Media")
                    .modifier(MagicStuff(activeIdx: $activeIdx, idx: 2))
                    .background(TextGeometry())
                    .onPreferenceChange(WidthPreferenceKey.self, perform: { self.w[2] = $0 })

                Spacer()

                Text("Likes")
                    .modifier(MagicStuff(activeIdx: $activeIdx, idx: 3))
                    .background(TextGeometry())
                    .onPreferenceChange(WidthPreferenceKey.self, perform: { self.w[3] = $0 })

                }
                .frame(height: 50)
                .padding(.horizontal, 10)
            Rectangle()
                .alignmentGuide(.underlineLeading) { d in d[.leading]  }
                .frame(width: w[activeIdx],  height: 2)
                .animation(.linear)
        }
    }
}

struct TextGeometry: View {
    var body: some View {
        GeometryReader { geometry in
            return Rectangle().fill(Color.clear).preference(key: WidthPreferenceKey.self, value: geometry.size.width)
        }
    }
}

struct MagicStuff: ViewModifier {
    @Binding var activeIdx: Int
    let idx: Int

    func body(content: Content) -> some View {
        Group {
            if activeIdx == idx {
                content.alignmentGuide(.underlineLeading) { d in
                    return d[.leading]
                }.onTapGesture { self.activeIdx = self.idx }

            } else {
                content.onTapGesture { self.activeIdx = self.idx }
            }
        }
    }
}

关于ios - 如何在 SwiftUI 中查看另一个 View 的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56505043/