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的框架会导致填充中发生各种奇怪的变化(至少看起来是这样)，可以通过抵消"top"视图来补偿，但这会导致其他不可预测的行为.指针和想法深表谢意.

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

偏移量不会影响其视图的框架.这就是为什么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屋！