问题描述
尝试使用视图作为列表行样式制作自定义列表(默认情况下摆脱列表中丑陋的行分隔).
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 只向一个方向滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!