空の状態を作成する方法

空の状態とその作成方法についての2分間の紹介！

空の状態は、表示するデータがない場合にアプリがどのように表示されるべきかを示します。たとえば、ユーザーのトリップのリストがホーム画面に表示される場合、しかしまだトリップを作成していない場合、空白の画面を表示する代わりに、トリップを作成する必要があることを説明するメッセージを表示することができます。

空の状態を作成する必要がある主なケースは、検索バーが入力に一致するデータがない場合や、ユーザーがまだデータのない画面に遭遇した場合です。

検索バーの空の状態

検索語句に結果がない場合に空の状態を作成します

1. リストの下に画像を挿入します（これを行うには画面のサイズを拡張する必要があるかもしれません）

2. 画像の表示を調整して、時々表示されるようにします

3. 画像にリストに適用されているフィルターを適用します-- この場合はリストアイテム（等しい、含む、含まない）

4. 画像がアイテム数（が0と等しい）の場合に画像が表示されるように別のカスタムフィルターを適用します

5. 空の状態をテストするためにプレビューを表示します

検索バーを作成するのに役立つ場合は、こちらをクリックしてください

空のページの状態

表示するものがない場合に画面のための空の状態ページを作成します（以下の例を参照）

1. リストまたは他のコンポーネントの下に画像を挿入します（これを行うには画面のサイズを拡張する必要があるかもしれません）

2. 画像の表示を調整して、時々表示されるようにします

3. リストアイテムの数が0の場合に画像が表示されるように表示を設定します

4. 必要に応じて、空の状態のためのカスタムフィルターをコンポーネントに追加します

5. 空の状態をテストするためにプレビューを表示します