SwiftUI ScrollView 只向一个方向滚动 [英] SwiftUI ScrollView only scroll in one direction

问题描述

尝试使用视图作为列表行样式制作自定义列表(默认情况下摆脱列表中丑陋的行分隔).

Trying to make a custom list using a view as the list row style (to get rid of the ugly line separates in the list by default).

但是，一旦我将 ZStack 行放在滚动视图中，滚动视图就会向两个方向滚动，而不仅仅是垂直滚动.

However, once I put my ZStack rows inside a scroll view, the scroll view scrolls in both directions and not just vertically.

这是内容视图:

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

这里是 customListItem:

and here is the 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])
        }

有什么办法可以将滚动限制为垂直或在其上强制使用框架吗?

Is there any way I can limit the scrolling to vertical or force a frame on this?

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

Trying to use the .frame(...) modifier does not work as I've tried it. This results in the view not loading at all.

示例图片:

推荐答案

这可以通过 GeometryReader 来实现.将您的 ScrollView 包裹起来，然后设置 VStack 的宽度.

This can be achieved with a GeometryReader. Wrap your ScrollView in one and then set the width of your VStack.

GeometryReader 是一个超级简单且非常有用的技巧，可用于SwiftUI :)

GeometryReader is a super easy, and pretty useful trick to have in your belt for SwiftUI :)

以下是我如何使用您的代码:

Here's how I got it working with your code:

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

这篇关于SwiftUI ScrollView 只向一个方向滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！