点击按钮时获取位置的更好解决方案

Question

我想获取当用户点击按钮时的位置，以在按钮的位置显示另一个视图。该按钮位于

ScrollView

内部，因此其位置可以更改。我正在使用

GeometryReader

来读取位置。然而，

GeometryReader

填充了父视图的所有空间，因此我们需要使用

.frame

修饰符来限制其宽度。这种方法有效，但由于我的应用程序已本地化，按钮标签的文本在不同语言中具有不同的宽度。因此，我想要一种更好的方法来自动调整按钮的宽度，而不是将其设置为固定值。

这是我当前的代码：

GeometryReader { geometry in
    Button(action: {
        optionPosition = geometry.frame(in: .global)

        isFilterShown = true
    }) {
        Image(systemName: "slider.horizontal.3")
            .font(.system(size: 18, weight: .light))
            .foregroundColor(Color(.label))

        Text("_filter_")
            .font(.regular(size: 16))
            .foregroundColor(Color(.label))
    }
    .padding(8)
    .background(RoundedRectangle(cornerRadius: 8).fill(Color(.secondarySystemBackground)))
}

对于这种情况，有人有更好的解决方案吗？

Answer 1

我找到了解决办法；但是，我仍然觉得它效率低下，因为我们需要更新滚动位置并维护一个单独的变量来存储它。

Button(action: {
    isFilterShown = true
}) {
    Image(systemName: "slider.horizontal.3")
        .font(.system(size: 18, weight: .light))
        .foregroundColor(Color(.label))

    Text("_filter_")
        .font(.regular(size: 16))
        .foregroundColor(Color(.label))
}
.padding(8)
.background(
    GeometryReader { geometry in
        RoundedRectangle(cornerRadius: 8).fill(Color(.secondarySystemBackground))
            .onAppear {
                filterPosition = geometry.frame(in: .global)
            }
            .onChange(of: geometry.frame(in: .global)) {
                filterPosition = $0
            }
    }
)