インスタンスメソッド
containerRelativeFrame(_:count:span:spacing:
alignment:)
このビューを、最も近いコンテナを基準としたサイズで非表示のフレーム内に配置します。
iOS 17.0+ iPadOS 17.0+ macOS 14.0+ Mac Catalyst 17.0+
tvOS 17.0+ watchOS 10.0+
visionOS 1.0+ Beta
func containerRelativeFrame(
_ axes: Axis.Set,
alignment: Alignment = .center
) -> some View
議論
最も近いコンテナのサイズに応じてビューの幅、高さ、またはその両方のサイズを指定するには、
containerRelativeFrame(_:alignment:) 修飾子を使用します。以下のようなさまざまなものが "コンテナ" を表すことができます。
iPadOS または macOS ではビューを表示するウィンドウ、または iOS ではデバイスのスクリーン。
NavigationSplitView の列
NavigationStack
TabView のタブ
ScrollView や List などのスクロール可能なビュー
この修飾子に指定されるサイズは、上記のようなコンテナのサイズから、そのコンテナに適用される可能性のある安全領域インセットを差し引いたものです。
以下の例では、紫色の各四角形が iOS のスクリーンのフルサイズを占めます。
- ScrollView(.horizontal) {
LazyHStack(spacing: 0.0) {
ForEach(items) { item in
Rectangle()
.fill(.purple)
.containerRelativeFrame([.horizontal, .vertical])
}
}
- }
この修飾子を使用して、コンテナ内に複数のビューが表示されるようにビューのサイズを変更します。この修飾子を使用する場合、count は、特定の軸のコンテナサイズの長さを分割すべき行または列の合計数を指します。span は、変更されたビューが実際に占有する行または列の数を指します。したがって、要素のサイズは以下のように記述できます。
- let availableWidth = (containerWidth - (spacing * (count - 1)))
- let columnWidth = (availableWidth / count)
- let itemWidth = (columnWidth * span) + ((span - 1) * spacing)
以下の例では、横軸に最も近いコンテナサイズのみを使用し、aspectRatio(_:contentMode:) 修飾子を使用して縦軸を決定できるようにしています。
- ScrollView(.horizontal) {
LazyHStack(spacing: 10.0) {
ForEach(items) { item in
Rectangle()
.fill(.purple)
.aspectRatio(3.0 / 2.0, contentMode: .fit)
.containerRelativeFrame(
.horizontal, count: 4, span: 3, spacing: 10.0)
}
}
- }
- .safeAreaPadding(.horizontal, 20.0)
ContainerRelativeFrame(_:alignment:_:) 修飾子を使用してあなた独自のカスタムロジックを適用し、ビューに最も近いコンテナのサイズを調整します。以下の例では、コンテナフレームの幅が 3 で除算され、その値が紫色の長方形の幅として使用されます。
- Rectangle()
.fill(.purple)
.aspectRatio(1.0, contentMode: .fill)
.containerRelativeFrame(
.horizontal, alignment: .topLeading
) { length, axis in
if axis == .vertical {
return length / 3.0
} else {
return length / 5.0
}
- }
以下も見よ
ビューのサイズに影響を与える
func frame(width: CGFloat?, height: CGFloat?, alignment: Alignment) -> some View
このビューを指定されたサイズで非表示のフレーム内に配置します。
func frame(depth: CGFloat?, alignment: DepthAlignment) -> some View
このビューを、指定された深さの非表示のフレーム内に配置します。
Beta
func frame(minWidth: CGFloat?, idealWidth: CGFloat?, maxWidth: CGFloat?, minHeight: CGFloat?, idealHeight: CGFloat?, maxHeight: CGFloat?, alignment: Alignment) -> some View
指定されたサイズ制約を持つ非表示のフレーム内にこのビューを配置します。
func frame(minDepth: CGFloat?, idealDepth: CGFloat?, maxDepth: CGFloat?, alignment: DepthAlignment) -> some View
指定された深度の制約を持つ非表示のフレーム内にこのビューを配置します。
Beta
func containerRelativeFrame(Axis.Set, alignment: Alignment) -> some View
このビューを、最も近いコンテナを基準としたサイズで非表示のフレーム内に配置します。
func containerRelativeFrame(Axis.Set, alignment: Alignment, (CGFloat, Axis) -> CGFloat) -> some View
このビューを、最も近いコンテナを基準としたサイズで非表示のフレーム内に配置します。
func fixedSize() -> some View
このビューを理想的なサイズに固定します。
func fixedSize(horizontal: Bool, vertical: Bool) -> some View
このビューを指定された大きさの理想的なサイズに固定します。
func layoutPriority(Double) -> some View
親レイアウトがその子にスペースを割り当てるべき優先順位を設定します。
ベータ版ソフトウェア
このドキュメントには、開発中の API または技術に関する予備情報が含まれています。この情報は変更される可能性があり、このドキュメントに従って実装されたソフトウェアは、最終的なオペレーティングシステムソフトウェアでテストする必要があります。
Apple のベータ版ソフトウェアの使用について詳しく知る >
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ
トップへ