コンポーネントコンテナの作成

Adalo が画面をレンダリングする方法

コンテナが何であり、なぜ必要な場合があるのかを理解するためには、Adalo がアプリ内の画面をどのようにレンダリングしているかを理解することが役立ちます。

Adalo は、画面上のコンポーネントを自動的に整理しようとする Flexbox というメソッドをバックグラウンドで使用しており、これらのコンテナを異なる画面サイズに対応できるようにしています。Flexbox がどのように機能するかについて詳しく知りたい場合は、こちらを参照してください。

個々のコンポーネントやコンポーネントグループを扱う際、Adalo から自動生成されたコンテナが、アプリの外観をどのようにしたいのか理解するのに苦労することがあります。複雑な画面レイアウトを持つ場合、画面サイズが変更されたり、ユーザーが大きなフォントサイズを使用した場合など、コンポーネントが奇妙な動作をすることがあります。これらの奇妙な動作を減らすために、Adalo に少しガイドをするために、矩形コンポーネントを使用して自分でコンテナを作成することができます。

コンテナの作成

ほとんどの場合、コンテナは必要ありませんが、コンポーネント用のコンテナを作成することは、アプリが望むように見えたり機能したりするために使用できる最良の方法の1つです。Web デザインのあらゆる種類で画面を配置するためのステープルとして、コンテナを使用したレイアウトは重要です。コンテナを作成するには以下の手順に従います：

1.) ビルダーの左上隅にある大きなプラス記号をクリックします。

2.) Simple セクションのドロップダウンメニューから、Rectangle コンポーネントを画面にドラッグして配置し、好みに合わせてサイズを変更します。

3.) 同様に、新しい矩形の上にテキストを追加し、テキストの黄色い境界線が矩形の内側に完全に収まるようにします。これにより、矩形がテキストのコンテナとして機能することが保証されます。画像のように境界線が接触している場合でも、矩形の境界線を超えない限り問題ありません。

4.) 必要に応じて、これらをグループ化してコンテナを管理しやすくすることができますが、コンテナの機能を維持するためにはグループ化は必須ではありません。

5.) 他のコンポーネントに対しても同様に行うことができます。コンテナ内に完全なレイアウトを構築したり、コンテナ内にコンテナを配置したりすることができます。これらを使用する際のいくつかのヒントを以下に示します：

• コンテナ内の動的長アイテム（複数行のテキストなど）は、コンテナの内容に合わせて自動的にコンテナを下方向に拡張します。

• 最初はコンテナをグレーにしておくと、見やすく操作しやすくなります。その後、背景色や透明に変更して非表示にすることもできます。

• コンテナは、コンポーネントの状態を作成する際に非常に便利です。コンテナ内に表示される内容に基づいてサイズを調整します。

• コンテナとコンポーネントをグループ化する場合、グループ全体にクリックアクションを追加することもできます。これにより、独自のボタン、ナビゲーションバー、メニューを作成できます。