如何查看可以向左/向右和向上/向下滑动的视图？答案

【问题标题】：How to go about a view which can be swiped left/right AND up/down?如何查看可以向左/向右和向上/向下滑动的视图？
【发布时间】：2022-01-25 17:58:57
【问题描述】：

我正在学习适用于 iOS 的 SwiftUI，并且正在使用 XCode 13。如何“见鬼”地左右滑动我的视口以更改同一“容器”或“集合”中的不同视图，而且允许向上和向下滑动，以更改主视图？（...到下一个或上一个，如果它们在“提要”中。）

这是我创建的一个视频，可以完美地展示我的情况：https://youtu.be/6MhFQu0AZx4

*（在视频中，红框是用户看到的屏幕，我正在尝试可视化如何在视图之间导航）

我有一个垂直显示“帖子”列表的时间线。我可以上下滑动导航到下一个帖子（就像 TikTok 视频一样，一次只显示 1 个“帖子”）。我可以垂直导航以转到下一个或上一个“帖子”。

但每个“帖子”都包含多个视图。而且我可以左右滑动以在每个帖子的这些视图之间导航（类似于具有多种媒体的 Insta）。每个视图都有不同的布局，但都附加到“帖子”（例如，带有一些图像的主封面视图，然后是：评论、完整详细信息、关于作者视图或更多）。

对于这种情况，我应该如何规划 iOS 应用程序的设计？我正在寻找建议、基本信息和方向 - 不是解决方案。

我找到了垂直和水平滑动的解决方案，但是当你可以同时做这两个时 - 游戏改变了......

【问题讨论】：

这是一个非常深思熟虑的问题，但是我要让你知道它可能不会被很好地接受。我将发布一些一般性的提示/技巧来让你继续使用它，但我认为这篇文章不会继续存在，因为它缺乏任何你自己做的尝试。但是，我们确实会尝试对新的和正在学习的开发人员有所了解，所以我会记住这一点。事实上，您已经回答了自己的问题，只是您没有意识到。
谢谢，我明白了。我会用我自己的解决方案更新我的帖子以保持它继续下去。让我们看看它是否会引发任何兴趣。我暂时起草了这个故事，并愿意进一步发展。希望这没问题并且符合平台指南，否则，请告诉我。

标签： ios swiftui swipe viewcontroller swipe-gesture

【解决方案1】：

首先，在开发过程中，您需要学习一项能够推动您前进的关键技能。该技能是将大问题分解为小问题，并一次处理一个单独的部分。例如，您的问题可以分解为三个单独的组件。这个相同的主体可以帮助您定义方法、可重用视图等。这个想法被称为“单一责任主体”。这意味着每件事都应该只做一件事，并且把这件事做好。我可以获取此代码并在任何地方通过正确的更改将其重新用于其他视图。

打破它

可水平滚动
可垂直滚动
每个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)
            }
        }
    }
}

这里要注意的另一件事是在我的内部 ForEach 循环中，我使用了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)。

我希望这对您有所帮助，祝您好运！

【讨论】：