SwiftUI 形式的动态行高 [英] Dynamic row height in a SwiftUI form

问题描述

我正在向 SwiftUI 表单添加控件以帮助用户输入数据(并限制输入！).尽管 Forms 有很多值得喜欢的地方，但我发现在这个容器之外运行良好的东西在它内部会做非常出乎意料的事情，而且如何弥补这一点并不总是显而易见的.

I'm adding controls to a SwiftUI Form to assist the user enter data (and constrain the entries!). Although there is a lot to like about Forms, I've discovered that things that work nicely outside this container do very unexpected things inside it and it's not always obvious how to compensate for this.

计划是将数据字段显示为单行.当行被点击时，控件从数据字段后面滑出 - 该行需要扩展(高度)以容纳控件.

The plan is to have the data field displayed as a single row. When the row is tapped, the control slides out from behind the data field - the row will need to expand (height) to accommodate the control.

我正在使用 Swift Playgrounds 来开发概念证明(或在我的案例中失败).这个想法是使用一个 ZStack，它通过覆盖视图并给它们一个不同的 zIndex 并在数据字段视图被点击时应用偏移量来允许一个很好的滑动动画.听起来很简单，但当然，当 ZStack 展开时，Form 行不会展开.

I'm using Swift Playgrounds to develop the proof of concept (or failure in my case). The idea is to use a ZStack which will allow a nice sliding animation by overlaying the views and giving them a different zIndex and applying the offset when the data field view is tapped. Sounds simple but of course the Form row does not expand when the ZStack is expanded.

在扩展时调整 ZStack 的框架会导致填充中出现各种奇怪的变化(或者至少看起来像这样)，这可以通过抵消顶部"视图来补偿，但这会导致其他不可预测的行为.感激地接受指示和想法.

Adjusting the frame of the ZStack while expanding causes all sorts of weird changes in padding (or at least it looks like it) which can be compensated for by counter-offsetting the "top" view but this causes other unpredictable behaviour. Pointers and ideas gratefully accepted.

导入 SwiftUI

struct MyView: View {
    @State var isDisclosed = false

    var body: some View {
        Form { 
            Spacer()

            VStack { 
                ZStack(alignment: .topLeading) {
                    Rectangle()
                        .fill(Color.red)
                        .frame(width: 100, height: 100)
                        .zIndex(1)
                        .onTapGesture { self.isDisclosed.toggle() }

                    Rectangle()
                        .fill(Color.blue)
                        .frame(width: 100, height: 100)
                        .offset(y: isDisclosed ? 50 : 0)
                        .animation(.easeOut)
                }
            }

            Spacer()
        }
    }
}

折叠的堆栈

扩展堆栈 - 视图与相邻行重叠

Expanded stack - view overlaps adjacent row

展开时调整 ZStack 垂直框架时的结果 - 顶部填充增加

Result when adjusting ZStack vertical frame when expanded - top padding increases

推荐答案

使用 alignmentGuide 而不是 offset.

...
//.offset(y: isDisclosed ? 50 : 0)
.alignmentGuide(.top, computeValue: { dimension in dimension[.top] - (self.isDisclosed ? 50 : 0) })
...

offset 不影响其视图的框架.这就是 Form 没有按预期做出反应的原因.相反，alignmentGuide 可以.

offset doesn't affect its view's frame. that's why Form doesn't react as expected. On the contrary, alignmentGuide does.

这篇关于SwiftUI 形式的动态行高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！