SwiftUI ScrollView仅向一个方向滚动

时间:2019-06-20 00:50:17

标签: swift scrollview swiftui

尝试使用视图作为列表行样式创建自定义列表(默认情况下,要摆脱列表中的丑陋行)。

但是,一旦我将ZStack行放入滚动视图中,滚动视图就会沿两个方向滚动,而不仅仅是垂直滚动。

这是contentView:

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(...)修饰符不起作用,因为我已经尝试过。这导致视图根本无法加载。

示例图片:

Without ScrollView

With ScrollView wrapping the VStack

5 个答案:

答案 0 :(得分:6)

这可以通过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"))
            }
        }

答案 1 :(得分:4)

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

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

答案 2 :(得分:0)

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

ScrollView(.vertical) {}

答案 3 :(得分:0)

尽管在大多数情况下,上述答案都有效,但没有一个对我有用!

在我的情况下,问题是scrollView子级比scrollView宽!

为它们添加静态宽度可以解决问题。

答案 4 :(得分:0)

使用iOS 14,Swift 5,SwiftUI 2.0

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

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