SwiftUI ScrollView 滑动怪异

Question

我将

.scrollTargetLayout()

和

.scrollPosition(id: $scrollID)

添加到我的

ScrollView

中，然后在

ForEach

中使用

ScrollView

生成12个矩形，当单击这些矩形时，

isTaped

变量将被转换。当

Spacer()

为 true 时，下面会出现一个

isTaped

。但是当我点击这些矩形时，它们发生了奇怪的变化（矩形上的 id 不正确），并且顶部的滚动 id 也可以看到。滚动ID并没有真正改变。我想问这是为什么？

预览如下： Xcode 预览中的 id 变化很奇怪， 还有它

这是模拟器上的预览

下面是我的代码：

struct WeirdScrollView: View {
    @State private var isTaped: Bool = false
    @State private var scrollID: Int? = 0
    
    var body: some View {
        VStack {
            VStack {
                Text("scroll id: \(scrollID ?? 0)")
                
                ScrollView(.horizontal, showsIndicators: false) {
                    LazyHStack(alignment: .top) {
                        ForEach(0..<12, id: \.self) { i in
                            RoundedRectangle(cornerRadius: 25)
                                .overlay {
                                    Text("id: \(i)")
                                        .foregroundStyle(Color.white)
                                }
                                .containerRelativeFrame(.horizontal, count: 3, spacing: 10.0)
                                .id(i)
                                .onTapGesture {
                                    withAnimation {
                                        isTaped.toggle()
                                    }
                                }
                        }
                    }
                    .scrollTargetLayout()
                }
                .scrollTargetBehavior(.viewAligned)
                .scrollPosition(id: $scrollID)
                
                if isTaped {
                   Spacer(minLength: 300)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

我原本打算制作一个自定义日期选择器（屏幕上只有一个日期选择器，用户可以水平滚动它），但是当我执行上述操作（更改

isTaped

）时，发生了一些奇怪的事情。 我的项目需要滚动 id 来绑定屏幕上显示的矩形，但是当我删除

.scrollPosition(id: $scrollID)

时，它运行得很好，但不符合我的需要

Answer 1

我对您的代码进行了一些更改，参考 rob Mayoff 的答案here。正如他所说，我使用

HStack

而不是

LazyHStack

。如下图所示，滚动 ID 文本确实发生了变化。矩形上的 ID 号保持不变。一个主要的变化是我有

ZStack

来分别封装

RoundedRectangle

和 ID

Text

。

import SwiftUI

struct WeirdScrollView: View {
    @State private var isTapped: Bool = false
    @State private var scrollID: Int? = 0
    var body: some View {
        VStack {
            VStack {
                Text("scroll id: \(scrollID ?? 0)")
                ScrollView(.horizontal, showsIndicators: false) {
                    HStack {
                        ForEach(0..<12, id: \.self) { i in
                            ZStack {
                                RoundedRectangle(cornerRadius: 25)
                                    .frame(maxWidth: .infinity, maxHeight: isTapped ? 300 : .infinity)
                                    .containerRelativeFrame(.horizontal, count: 3, spacing: 10.0)
                                    .onTapGesture {
                                        withAnimation {
                                            isTapped.toggle()
                                            scrollID = i
                                        }
                                    }
                                Text("id: \(i)")
                                    .foregroundStyle(Color.white)
                            }
                        }
                    }
                    .scrollTargetLayout()
                }
                .scrollTargetBehavior(.viewAligned)
                .scrollPosition(id: $scrollID)
            }
        }
    }
}