css 视图列表折叠_如何为您的SwiftUI应用编写可折叠/可扩展视图

css 视图列表折叠

In app development, you often have the requirement for some kind of collapsible view. With the release of iOS 14 and Xcode 12, we will have the luxury of DisclosureGroup view elements to achieve that for us. But until its release — and for apps that need some backward compatibility — you have to provide your own custom solution for that.

在应用程序开发中，您经常需要某种可折叠的视图。 随着iOS 14和Xcode 12的发布，我们将拥有DisclosureGroup视图元素的丰富功能来为我们实现这一目标。 但是，直到它发布(对于需要向后兼容的应用程序)之前，您必须为此提供自己的自定义解决方案。

In this article, I want to show you a simple approach to creating your own custom collapsible view in SwiftUI. Let’s get started!

在本文中，我想向您展示一种在SwiftUI中创建自己的自定义可折叠视图的简单方法。 让我们开始吧！

Note: XCode 11.x, Swift 5.x, and iOS 13.x are required. It’s assumed you already have some knowledge about programming in Swift and SwiftUI, how to build apps, and implement your own views in them. This is not a tutorial to teach you the basics.

注意：需要XCode 11.x，Swift 5.x和iOS13.x。 假定您已经对Swift和SwiftUI的编程有所了解，如何构建应用程序并在其中实现自己的视图。 这不是教您基本知识的教程。

目标 (The Goal)

As the final result, we want to have a simple text view with a chevron icon indicating the collapse state and some content underneath it — initially in a collapsed state.

最终结果是，我们希望有一个简单的文本视图，并带有人字形图标，以指示折叠状态及其下的某些内容-最初处于折叠状态。

The initial view should look like this:

初始视图应如下所示：

When the row with the text and icon is tapped, the collapsed content should slide down and be visible. Of course, we want the view to take any kind of content for the collapsed container and not just text, buttons, or some other specific type.

轻敲带有文本和图标的行时，折叠的内容应向下滑动并可见。 当然，我们希望视图为折叠的容器获取任何类型的内容，而不仅仅是文本，按钮或其他特定类型的内容。

The kind of view and behavior we want to have.

我们想要的一种观点和行为。

可折叠视图 (The Collapsible View)

We need a simple view that takes our label and content as parameters and shows it in a VStack with the last row collapsed. We create a button element with a plain style to handle the tap event and keep the parameter for the collapsed state private to avoid data corruption.

我们需要一个简单的视图，该视图以标签和内容为参数，并在VStack其显示为最后一行。 我们创建一个具有普通样式的button元素来处理tap事件，并将折叠状态的参数设为私有，以避免数据损坏。

To make the shift from collapsed to expanded nice for the user, we also add some animation and transition to the VStack holding the collapsed content. In this case, we use a slide transition with an ease-out animation. You might want to change this to make it fit your animation/transition scheme or use no animation at all.

为了使用户从折叠状态扩展到扩展状态，我们还添加了一些动画， VStack包含折叠内容的VStack过渡。 在这种情况下，我们使用带有缓动动画的幻灯片过渡。 您可能需要更改此设置以使其适合您的动画/过渡方案，或者完全不使用动画。

Here’s the final view:

这是最终视图：

主视图中的用法 (The Usage Inside the Main View)

The following example shows a basic view that embeds our previously created collapsible view underneath a text inside a VStack:

以下示例显示了一个基本视图，该视图将我们之前创建的可折叠视图嵌入到VStack的文本下方：

The code should be pretty straightforward. To keep things simple, we just have a basic text view with padding and a background color as our content. Of course, this could be any view you want. Even scroll and navigation views should work, although the latter may make no sense at all in such a context.

该代码应该非常简单。 为简单起见，我们只提供基本文本视图，并以填充和背景色为内容。 当然，这可以是您想要的任何视图。 即使滚动视图和导航视图也应该起作用，尽管在这种情况下，后者可能毫无意义。

结论 (Conclusion)

This example is very simple and static — and that’s intended. If you want some advanced functionality (e.g. dynamically changing the label according to some value set inside the collapsible content), you’d need to extend the collapsible view, but that might be content for another article…

这个例子非常简单和静态-这就是预期的。 如果您需要一些高级功能(例如，根据可折叠内容内部设置的某些值动态更改标签)，则需要扩展可折叠视图，但这可能是另一篇文章的内容……

翻译自: https://medium.com/better-programming/how-to-write-a-collapsible-expandable-view-for-your-swiftui-app-d4a47fe8cb52

css 视图列表折叠