micomia株式会社の井上です。今回はTextについて解説していきます。
初心者にも分かりやすく解説していくのでぜひご一読ください。
1. Textとは
Textはそのままの意味ですが、アプリに文字を表示させるためのWidgetです。
画面名や投稿の本文など、基本的な箇所で役割を果たしています。
2. Textの実装方法
Textも他のWidgetと同じように実装できます。
3. Textの詳細設定
右側のProperties Panelを見ていきます。
まずはPaddingです。好きな値を設定してこのように余白を入れることができます。
その下のText Propertiesはテキスト自体に関する設定をすることができます。
Theme Text Styleはテキストのスタイルを設定することができます。
その下のFont FamilyはTextのフォントを設定することができます。
日本語の場合はIBM Plex Sans JPを使うことが多いです。このフォントを使うと漢字が変に表示されにくく使いやすいです。
Font Wightは文字の太さを設定することができます。100~900の太さがあるのでさまざまな太さにすることができます。
その下のFont Sizeで文字の大きさを設定することができます。
Text Colorは文字の色を設定できます。
下に一覧表示されているカラーはTheme Colorと言ってあらかじめセットされているカラーが表示されますが、好きなカラーにしたいときは上部のカラーパレットの部分で選択することができます。
Text Alignはテキストの右寄せ、左寄せなどを設定できます。これは2行以上になるときに使用する機能になります。
隣にあるMax Linesは、たとえば2行にした場合は2行までしか表示されなくなります。
4. さいごに
今回はTextについて解説していきました。Textはほとんどのアプリで必要な要素なので、ぜひ本記事を参考にして実装してみてください。
本記事の内容を動画で見たい方は以下をご覧ください。
.jpg%3Falt%3Dmedia%26token%3Da3c76743-713e-48e5-945a-601a7438cb5c&w=3840&q=75)
.jpg%3Falt%3Dmedia%26token%3D910d6567-e2cd-4ea5-ad8a-07d925ce700b&w=3840&q=75)
.png%3Falt%3Dmedia%26token%3D856fae6b-5eed-41e0-993c-4a053186faf5&w=3840&q=75)
.png%3Falt%3Dmedia%26token%3Def6b9919-f6ea-4ed8-924b-90f297e0549b&w=3840&q=75)
.png%3Falt%3Dmedia%26token%3D8e864089-6895-4bb1-b90d-d607b8416753&w=3840&q=75)
