如何查看可以左右滑动和上下滑动的视图？ [英] How to go about a view which can be swiped left/right AND up/down?
问题描述
这是我制作的一段视频，目的是完美地将我的情况可视化：https://youtu.be/6MhFQu0AZx4
*(在视频中，红色框是用户看到的屏幕，我正在尝试可视化如何在视图之间导航)
我有一个时间线，上面有一个垂直显示的"帖子"列表。我可以向上和向下滑动导航到下一个帖子(像TikTok视频一样，一次只显示一个帖子)。我可以垂直导航以转到下一个或上一个"帖子"。
但每个"帖子"都包含多个视图。我可以向左滑动和向右滑动，以便在每个帖子的这些视图之间导航(类似于带有多种媒体的Insta)。每个视图都有不同的布局，但都附加到一个"帖子"(例如，带有一些图像的主封面视图，然后：评论、完整详细信息、关于作者视图或更多内容)。
我应该如何为这种情况规划iOS应用程序的设计？我在寻求建议、基本信息和方向，而不是解决方案。我找到了垂直和水平滑动的解决方案，但当你能同时做到这两点时-游戏就会改变...
推荐答案
首先，在开发中，您需要学习一项关键技能，这将推动您向前发展。这种技能就是把大问题分解成小问题，一次只处理一个部分。例如，您的问题可以分解为三个单独的组成部分。同样的原则可以帮助您定义方法、可重用的视图等。这个想法被称为单一责任原则。这意味着每件事都应该只做一件事，并且真正做好那一件事。经过适当的更改，我可以在任何地方重新使用此代码用于其他视图。
分解
- 可水平滚动
- 可垂直滚动
- 每个
Row需要支持多个Columns
因此，一旦你分解了它，你需要一次只处理一个问题。让我们从水平滚动项开始。
水平滚动
这里有一个快速而肮脏的解决方案来解决水平滚动。这只是问题的一部分，但它为我们建立了一个基金会来解决其余的问题。
struct FirstView: View {
var body: some View {
ScrollView {
ForEach(0..<5) { index in
// NOTE: ANY VIEW can go in here, including collections :D
Rectangle()
.fill(.black)
.frame(width: UIScreen.main.bounds.size.width * 0.8,
height: UIScreen.main.bounds.size.height * 0.8)
}
}
}
}
添加垂直滚动
问题的下一部分是添加一些垂直滚动。使用我们先前定义的ForEach循环，我们可以在每个"；Section"；中添加任何视图，这样我们就可以添加另一个滚动视图。
struct FirstView: View {
var body: some View {
ScrollView(.vertical) {
ForEach(0..<5) { _ in
// NOTE: Notice I just added another ScrollView and changed it's direction to horizontal.
ScrollView(.horizontal) {
LazyHStack {
ForEach(0..<5) { _ in
Rectangle()
.fill(.black)
.frame(width: UIScreen.main.bounds.size.width * 0.8,
height: UIScreen.main.bounds.size.height * 0.8)
}
}
}.frame(height: UIScreen.main.bounds.height)
}
}
}
}
LazyHStack，它告诉它水平布局这些视图，这是在该方向上布局它们的要求。为了引导，它还有助于节省内存，因为只有在显示视图时才会加载它们。您也可以将外层包装在LazyVStack中以获得相同的效果。使其接受不同数量的查看
这最后一篇文章有很大的回旋余地来处理它，您可能会想要添加一些QOL内容或生活质量更改，例如对齐到一列/行、居中等，但我将把这些留给您来搜索，因为互联网上有大量关于这些内容的信息。注意，我将0..<5用于ForEach循环。这就是你想要改变的价值。我建议使用[[<someObject>]]来管理。这是一个数组数组，如果您感到困惑的话。原因是外层数组对象可能包含您的Rows，而内部数组可能包含您的Columns，这使得遍历它们变得更加容易管理和跟踪。示例对象可能如下所示。
var posts: [[Post]] = [[Post1, Post2, Post3],
[Post1, Post2, Post3]]
two rows和three columns。你可以像这样把它的计数插入到你的ForEach中。ForEach(0..<posts.count)，然后在内部ForEach(0..<posts[index].count)。
我希望这能在一些小方面有所帮助，祝你好运！
这篇关于如何查看可以左右滑动和上下滑动的视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
