如何查看可以左右滑动和上下滑动的视图？-移动开发问题

How to go about a view which can be swiped left/right AND up/down?(如何查看可以左右滑动和上下滑动的视图？)

本文介绍了如何查看可以左右滑动和上下滑动的视图？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在学习适用于iOS的SwiftUI，我正在使用XCode13。如何使用向左和向右滑动我的视窗来更改同一‘容器’或‘集合’中的不同视图，并且允许向上和向下滑动以更改主视图？(...转到下一个或上一个(如果它们在"提要"中)。)

这是我制作的一段视频，目的是完美地将我的情况可视化：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)
            }
        }
    }
}

这里需要注意的另一件事是，在我的内部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)。

我希望这能在一些小方面有所帮助，祝你好运！

这篇关于如何查看可以左右滑动和上下滑动的视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

问题描述

推荐答案

分解

水平滚动

添加垂直滚动

使其接受不同数量的查看