テキストのベースラインとは、文字が「乗っている」ラインのことです。プラクティスとされています。コンポーザブルが必要です。含まれるようにする必要があるため、上下に並べて配置します。コンポーザブルを見つけ、この基本的な実装を使用してそのコンテンツを更新します。}}次の点に注目してください。画像の下のテキストで十分にその意味を説明しているため、画像にも説明を付加する必要はありません。ここではハードコードされた画像とテキストを使用しています。コンポーザブルで指定されるパラメータを使用して動的要素となるようにこれらの画像とテキストを移動します。このコンポーザブルのプレビューを見てみましょう。いくつかの改良を加える必要があります。顕著なのは、画像のサイズが大きすぎることと、円形でないことです。コンポーザブルを調整できます。修飾子と同様に、特定のサイズに合うようにコンポーザブルを調整します。修飾子の動作は異なり、コンポーザブルの外観を調整します。設定すると、コンポーザブルのコンテンツがその形状にクリップされます。}}現時点で、プレビュー中のデザインは次のようになります。画像を適切なサイズに変更する必要もあります。パラメータを使用します。いくつかのオプションがあります。一般的なものを以下に示します。この例では切り抜きタイプを使用するのが適切です。修飾子とパラメータを適用すると、コードは次のようになります。}}デザインは次のようになります。位置揃えを設定して、テキストを水平方向に位置揃えします。一般に、コンポーザブルを親コンテナ内で位置揃えするには、親コンテナの位置揃えを設定します。子自体に親内部での配置について指示する代わりに、子の配置方法を親に指示します。子を水平方向に配置する方法を決定します。オプションは次のとおりです。垂直方向の配置を設定します。場合と類似しています。水平方向と垂直方向の両方の配置を結合します。オプションは次のとおりです。TopStartTopCenterTopEndCenterStartCenterCenterEndBottomStartBottomCenterBottomEndコンテナのすべての子も、これと同じ配置パターンに従います。このデザインでは、テキストは水平方向に中央揃えで配置する必要があります。水平方向に中央揃えするように設定します。}}これらのパートを実装したら、あとはいくつかの小さな変更のみで、コンポーザブルを目標のデザインと同一にできます。それらはご自分で実装してみてください。行き詰まった場合には最終的なコードが参考になります。以下の手順を検討してください。画像とテキストを動的にします。それらを引数として、コンポーズ可能な関数に渡します。対応するプレビューを更新して、ハードコードしたデータを渡すようにしてください。スタイルを使用するようにテキストを更新します。図に沿ってテキスト要素のベースラインのスペースを更新します。これらのステップの実装が完了すると、コードは以下のようになります。}}たいていの場合、これと同じ結果を得るための方法は複数あるため、ここで提案したソリューションと実際の実装は若干異なる場合があります。使用する、またはパディングを設定するという方法があり、どちらを採用しても同じビジュアルになります。ガイドラインに沿っていることです。body」要素の場合と同様の方法で実装します。レッドライン入りのデザインを以下に示します。ここでは、コンポーザブルのフルサイズが指定されています。あることが確認できます。角が丸められています。コンポーザブルを使用して指定します。ライブラリのコンポーネントの一つです。パターンに従っているため、アプリのテーマの変更に適応します。テーマ設定に関するドキュメントをご覧ください。パラメータと修飾子を設定することで、ニーズに適応させることができます。この場合は、サーフェスの角を丸くする必要があります。パラメータを使用できます。テーマから取得した値を使用します。コードは次のようになります。}}実装のプレビューを見てみましょう。次に、前のステップで学習したことを応用します。幅を設定し、その子を垂直方向に位置揃えします。図に基づいて画像のサイズを設定し、コンテナ内で切り抜きます。解答コードを確認する前に、これらの変更をご自分で実装してみてください。コードは次のようになります。}}プレビューは次のようになります。このコンポーザブルを完成させるには、次の手順を行います。画像とテキストを動的にします。それらを引数として、コンポーズ可能な関数に渡します。スタイルを使用するようにテキストを更新します。画像とテキストの間隔を更新します。最終的な結果は次のようになります。プレビューをご覧ください。画面に表示する基本的なコンポーザブルを作成したところで、続いて画面のさまざまなセクションの作成に取り掛かりましょう。