Layout Containers

Arrange views horizontally and vertically inside container views like stacks and grids.

Overview 概要

Use layout containers to arrange the elements of your user interface. Stacks and grids update and adjust the positions of the child views they contain in response to changes in content or interface dimensions. You can nest layout containers inside other layout containers to any depth to achieve complex layout effects.

To fine tune the position, alignment, and other elements of a layout that you build with layout container views, use the view modifiers in Layout Modifiers. If you need a container view that provides more sophisticated behaviors, like a list or a table, see Collection Containers.

Topics 話題

Essentials 要点

Picking Container Views for Your Content

Build flexible user interfaces by using stacks, grids, lists, and forms.

Inspecting View Layout

Determine the position and extent of a view using Xcode previews or by adding temporary borders.

Stacks

Building Layouts with Stack Views

Compose complex layouts from primitive container views.

struct HStack

A view that arranges its children in a horizontal line. あるビュー、それは、それの子らをある水平線に整列します。

struct VStack

A view that arranges its children in a vertical line. あるビュー、それは、それの子らをある垂直線に整列します。

struct ZStack

A view that overlays its children, aligning them in both axes. あるビュー、それは、それの子らを上に重ねます、それらを両方の軸で整列しています。

Lazy Stacks

Grouping Data with Lazy Stack Views

Split content into logical sections inside lazy stack views.

Creating Performant Scrollable Stacks

Display large numbers of repeated views efficiently with scroll views, stack views, and lazy stacks.

struct LazyHStack

A view that arranges its children in a line that grows horizontally, creating items only as needed.

struct LazyVStack

A view that arranges its children in a line that grows vertically, creating items only as needed.

struct PinnedScrollableViews

A set of view types that may be pinned to the bounds of a scroll view.

Grids

struct LazyHGrid

A container view that arranges its child views in a grid that grows horizontally, creating items only as needed.

struct LazyVGrid

A container view that arranges its child views in a grid that grows vertically, creating items only as needed.

struct GridItem

A description of a single grid item, such as a row or a column.

Separators

struct Spacer

A flexible space that expands along the major axis of its containing stack layout, or on both axes if not contained in a stack. ある柔軟な空き、それはそれを収容しているスタックレイアウトの長軸に沿って、またはスタックの中に含まれないならば両方の軸上で拡張します。

struct Divider

A visual element that can be used to separate other content. ある視覚的要素、それは他の内容を隔てるために使われることができます。