SwiftUI ScrollView 只向一个方向滚动答案

【问题标题】：SwiftUI ScrollView only scroll in one directionSwiftUI ScrollView 只向一个方向滚动
【发布时间】：2019-11-02 18:45:36
【问题描述】：

尝试使用视图作为列表行样式来制作自定义列表（以消除默认情况下列表中难看的行分隔符）。

但是，一旦我将 ZStack 行放入滚动视图中，滚动视图就会双向滚动，而不仅仅是垂直滚动。

这里是内容视图：

NavigationView {
            ScrollView{
                VStack(alignment: .leading){
                    ForEach(friends) { friends in
                        NavigationButton(destination: MessageDetailView(friend: friends)) {
                            CustomListItem(friend: friends)
                        }
                    }
                    Spacer()
                }
            }
                .foregroundColor(.black)
                .navigationBarTitle(Text("Messages"))
        }

这是 customListItem：

Group{
            ZStack {
                RoundedRectangle(cornerRadius: 10)
                    .shadow(radius: 1, y:1)
                    .frame(width: UIScreen.main.bounds.width - 32, height: 75)
                    .foregroundColor(.gray)

                HStack {
                    Image(systemName: "person.crop.circle")
                        .resizable()
                        .frame(width: 50, height: 50)
                    VStack(alignment: .leading) {
                        HStack {
                            Text(friend.name)
                                .font(.headline)
                            Text("\(friend.date, formatter: dateFormatter)")
                        }
                        Text(friend.messagesReceived[0])
                            .font(.subheadline)
                        }       .lineLimit(nil)
                    Spacer()
                    Image(systemName: "chevron.right.circle")
                        .foregroundColor(.black)
                    }.padding(10)
                }.padding([.leading, .trailing])
        }

有什么办法可以限制滚动到垂直或强制在此滚动框架？

尝试使用 .frame(...) 修饰符不起作用，因为我已经尝试过了。这会导致视图根本不加载。

示例图片：

【问题讨论】：

标签： swift scrollview swiftui

【解决方案1】：

使用 iOS 14、Swift 5、SwiftUI 2.0

这就是答案...您可以在一组中使用垂直和水平。

ScrollView([.vertical,.horizontal]) {
  ....
}

【讨论】：

【解决方案2】：

虽然在大多数情况下，上述答案都有效，但没有一个对我有用！

在我的例子中，问题是 scrollView 子级比 scrollView 宽！

为它们添加静态宽度就可以了。

【讨论】：

【解决方案3】：

尝试像这样更具体地滚动方向

ScrollView(.vertical) {}

【讨论】：

欢迎来到 StackOverflow！看起来这个答案并没有比this answer 添加更多内容；如果没有更多内容来区分您的答案与链接的答案，您的答案可能会被否决或删除。请edit your answer 提供更多解释/内容/参考。如果您做不到，请不要担心！还有很多其他问题；只需删除此帖子，然后再试另一个问题。回答愉快！

【解决方案4】：

从 Xcode 11 beta 3 (11M362v) 开始，在构造 ScrollView 时有一个 axes 参数，可以设置为 .horizontal 或 .vertical

ScrollView(.vertical, showsIndicators: true) { ... }

【讨论】：

这应该是公认的答案！请注意，即使添加了.vertical，如图所示，如果 ScrollView 的内容比 ScrollView 的宽度宽，您仍然可以获得一些横向滚动。限制内容宽度可以解决这个问题。

【解决方案5】：

这可以通过GeometryReader 来实现。将您的ScrollView 包装成一个，然后设置您的VStack 的宽度。

GeometryReader 是一个超级简单且非常有用的 SwiftUI 技巧：)

这是我如何使用您的代码：

NavigationView {
            GeometryReader { geometry in
                ScrollView {
                    VStack(alignment: .leading){
                        ForEach(self.friends) { friend in
                            NavigationButton(destination: MessageDetailView(friend: friend)) {
                                CustomListItem(friend: friend)
                            }
                        }
                        Spacer()
                    }.frame(width: geometry.size.width)
                }
                    .foregroundColor(.black)
                    .navigationBarTitle(Text("Messages"))
            }
        }

【讨论】：

天才，这成功了！不知道 GeometryReader -> 会调查它！谢谢:)
@piebie 我知道 GeometryReader，但您的回答很棒，因为它展示了如何将它与 VStack 和 Scrollview 一起使用，效果非常好。在我的例子中，布局在旋转时中断了，现在它像冠军一样工作，多亏了你。