Columns

Columns UIパターンを使用すると、コンテンツを複数の列に分割することができ、画面上の情報が見やすくなります。

Columns UIパターンの使用方法

1.Service StudioのツールボックスでColumnsを検索します。

様々なColumnsウィジェットが表示されます。

![](<images/columns-2-ss.png>)

1.ツールボックスから、必要なColumnsウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。この例では、Columns 2ウィジェットを画面にドラッグしています。

![](<images/columns-3-ss.png>)

1.画像、フォーム、テキストなどの必要なコンテンツをColumnsウィジェットに追加します。この例では、画像とテキストを追加しています。

![](<images/columns-4-ss.png>)

1.［Properties］タブでオプションのプロパティを設定し、Columnsのルックアンドフィールをカスタマイズできます。たとえば、列のサイズ、各列の間のスペースのサイズ（GutterSize）、様々なタイプのデバイス上で列が表示される順序を設定できます。

![](<images/columns-5-ss.png>)

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。