グリッドレイアウトとは何ですか？

アプリケーションインターフェイスを開発するとき、私たちはほとんどの場合、視覚要素の2次元表現を扱います。レイアウトを標準化および簡素化するように設計された多くのコントロールがあります。Web開発の概念に関して、CSSワーキンググループは、2DUIテンプレートを作成するための最良の方法として2017年にグリッドレイアウトを提案しました。



iOS 13 SDKでは、要素をVStack、HStack、ZStackをリストの形式で線形に配置する機能があります：リスト。しかし、2次元座標系での要素の配置のセマンティクスを定義する方法はありません。そこで、自分たちで作成することにしました。

iOS 14で、Appleはグリッド実装を導入しました。これについては、以下のApple LazyVGrid / LazyHGridセクションで説明します。

グリッドレイアウトとのインターフェースの例

grid . , . Grid, UICollectionView, .





, Grid Layout

Timetable

, , . grid , . Spans grid item .

, .

Flipboard

, , . , — . Grid Layout , grid flow .rows .columns.

grid:



grid , , . , .

, , tracks. . , , .

Grid, . .

, , , . .

, : .

, . , , . grid (dense) .

Grid , , . scroll fill.

.

, , .

ExyteGrid — Grid, SwiftUI. , ExyteGrid:

- Strava

, grid. Grid. , , spans .

iOS

iOS? , grid, grid item. ExyteGrid layout, . SwiftUI grid.

Apple LazyVGrid/LazyHGrid

Apple LazyVGrid LazyVGrid iOS 14, ExyteGrid :

• Apple span . / .
• grid: / .
• ExyteGrid (grid packing): sparse, dense, , , .
• Apple Grid fade , ForEach. ExyteGrid , ID grid. ID GridGroup ForEach, SwiftUI (transition) .
• . Flexible Apple Grid , , .fr ExyteGrid .
• .adaptive Apple Grid .fit . Adaptive . , . Fit ExyteGrid , , .
• ExyteGrid gridCellOverlay gridCellBackground, custom view , . .
• Apple Grid , , ExyteGrid .
• ExyteGridにはコンテンツモードがあります。.fillでは、各アイテムのサイズを手動で計算しなくても、グリッドがアイテムを配置してコンテナビューを埋めます。
  
  これら2つの実装の概念は多少似ていますが、多くの点で異なります。Apple Gridの側にはネイティブの実装があり、多数の要素に焦点を合わせ、ExyteGridの側には、より多くの機能とオープンソースコードがあり、開発には誰でも参加できます。

ExyteGridライブラリリポジトリのユーザーおよび寄稿者の両方としてお会いできてうれしいです。

もちろん、ロードマップセクションにはまだ実行されていない機能のリストがあります。