コンポーネントコンテナの作成
コンポーネントを動かしたり、展開したりしてはいけない領域に入らないようにするために、コンポーネント用の非表示コンテナを作成することができます。
Last updated
Was this helpful?
コンポーネントを動かしたり、展開したりしてはいけない領域に入らないようにするために、コンポーネント用の非表示コンテナを作成することができます。
Last updated
Was this helpful?
スキルレベル: 中級
画面とコンポーネントについて知っていること
コンポーネントを配置してグループ化する方法について知っていること
この機能を使用するには有料の Adalo プランは必要ありません。
コンテナが何であり、なぜ必要な場合があるのかを理解するためには、Adalo がアプリ内の画面をどのようにレンダリングしているかを理解することが役立ちます。
Adalo は、画面上のコンポーネントを自動的に整理しようとする Flexbox というメソッドをバックグラウンドで使用しており、これらのコンテナを異なる画面サイズに対応できるようにしています。Flexbox がどのように機能するかについて詳しく知りたい場合は、こちらを参照してください。
個々のコンポーネントやコンポーネントグループを扱う際、Adalo から自動生成されたコンテナが、アプリの外観をどのようにしたいのか理解するのに苦労することがあります。複雑な画面レイアウトを持つ場合、画面サイズが変更されたり、ユーザーが大きなフォントサイズを使用した場合など、コンポーネントが奇妙な動作をすることがあります。これらの奇妙な動作を減らすために、Adalo に少しガイドをするために、矩形コンポーネントを使用して自分でコンテナを作成することができます。
ほとんどの場合、コンテナは必要ありませんが、コンポーネント用のコンテナを作成することは、アプリが望むように見えたり機能したりするために使用できる最良の方法の1つです。Web デザインのあらゆる種類で画面を配置するためのステープルとして、コンテナを使用したレイアウトは重要です。コンテナを作成するには以下の手順に従います：
1.) ビルダーの左上隅にある大きなプラス記号をクリックします。
2.) Simple セクションのドロップダウンメニューから、Rectangle コンポーネントを画面にドラッグして配置し、好みに合わせてサイズを変更します。
3.) 同様に、新しい矩形の上にテキストを追加し、テキストの黄色い境界線が矩形の内側に完全に収まるようにします。これにより、矩形がテキストのコンテナとして機能することが保証されます。画像のように境界線が接触している場合でも、矩形の境界線を超えない限り問題ありません。
4.) 必要に応じて、これらをグループ化してコンテナを管理しやすくすることができますが、コンテナの機能を維持するためにはグループ化は必須ではありません。
5.) 他のコンポーネントに対しても同様に行うことができます。コンテナ内に完全なレイアウトを構築したり、コンテナ内にコンテナを配置したりすることができます。これらを使用する際のいくつかのヒントを以下に示します：
コンテナ内の動的長アイテム（複数行のテキストなど）は、コンテナの内容に合わせて自動的にコンテナを下方向に拡張します。
最初はコンテナをグレーにしておくと、見やすく操作しやすくなります。その後、背景色や透明に変更して非表示にすることもできます。
コンテナは、コンポーネントの状態を作成する際に非常に便利です。コンテナ内に表示される内容に基づいてサイズを調整します。
コンテナとコンポーネントをグループ化する場合、グループ全体にクリックアクションを追加することもできます。これにより、独自のボタン、ナビゲーションバー、メニューを作成できます。
この解説を作成する際に使用したアプリを見たいですか？こちらをクリックして、例のアプリを使用するかクローンしてください。アプリをクローンする方法がわからない場合は、こちらで学ぶことができます。
通常、コンテナは必須ではありませんが、アプリのレイアウトで予期しない動作が発生した場合、これらのコンポーネントを制御するための素晴らしい方法です。
アプリのレイアウトをコンテンツのセクションとして考えることは、アプリのデザインに非常に役立ちます。コンテナを使用する必要がなくても、このように考えることでアプリのレイアウトに一貫性をもたらすことができます。
コンテナを常に非表示にする必要はありません。多くのアプリは、非常にスタイリッシュで機能的な方法でコンテンツを含むためにタイルやバナーを使用しています。
他のコンテナ間にスペーサーとしてコンテナを使用することもできます。すべてがきちんと整理された、パズルのようにぴったりと合うようにします！
この記事に関する追加のヘルプが必要な場合は、いつでもコミュニティフォーラムで質問できます！投稿にこの記事へのリンクも貼っておくことを忘れないでください！
チュートリアルやヘルプドキュメントのリクエストがありますか？お知らせください！
