Flutter コンポーネントの基本 ——Text#
コンポーネント#
テキストコンポーネント：Text Widget#
Text はテキストコンポーネントで、iOS の UILabel に似ており、テキストの表示に使用され、レイアウトの基本的なウィジェットの一つです。
テキストの整列方法：TextAlign#
- TextAlign
- center：テキストをコンテナの中央に整列
- left：テキストをコンテナの左端に整列
- right：テキストをコンテナの右端に整列
- start：テキストをコンテナの先頭に整列。左から右へのテキスト（TextDirection.ltr）の場合、これは左端です。右から左へのテキスト（TextDirection.rtl）の場合、これは右端です。
- end：テキストをコンテナの末尾に整列。左から右へのテキストの場合、これは右端です。右から左へのテキストの場合、これは左端です。
- justify：ソフト改行で終わるテキストの行を引き伸ばしてコンテナの幅を埋めます。ハード改行で終わる行は先頭端に整列されます。
まとめ：TextAlign.centerは中央揃え、left は左揃え、right は右揃え、start と end の意味は TextDirection によって異なります。TextDirection が ltr（左から右）である場合、start と end の意味は left と right と同じです。TextDirection が rtl（右から左）である場合、start と end の意味は left と right とは逆になります。justify は強制的な改行ではありません（まあ、私は翻訳できませんが、下の図を見てください）。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text widget',
home: Scaffold(
appBar: AppBar(title: Text('AppBarTitle')),
body: Center(
child: Text(
'Hello Flutter，TextDirectionはrtlで、textAlignはjustifyです',
textAlign: TextAlign.justify,
textDirection: TextDirection.ltr,
// maxLines: 1,
// overflow: TextOverflow.,
style: TextStyle(
fontSize: 25.0,
color: Color.fromARGB(255, 160, 160, 160),
// decoration: TextDecoration.lineThrough,
// decorationStyle: TextDecorationStyle.solid,
),
),
)));
}
}
テキストの配置方向 textDirection#
textDirection は H5 の 'row-reverse' の概念に似ており、textAlign の start、end、justify 属性に影響を与えます。
最大行数 maxLines#
iOS でラベルの行数を無制限に設定するにはnumberOfLines=0を設定しますが、Flutter では最大行数maxLinesは 0 にできません。行数を無制限に設定する場合は、この属性を設定しないでください。
オーバーフロー表示 overFlow#
overFlow は iOS の lineBreakMode に似ており、指定された行数を超えた後の表示方法を設定します：切り捨て、省略...
指定された行数を超えた後の表示を設定する必要があるため、最初に maxLines を設定する必要があります。設定しない場合、デフォルトは無制限の行数であり、この属性を設定しても意味がありません。
- overFlow
- clip：オーバーフローしたテキストをコンテナに合わせて切り取ります
- ellipsis：テキストがオーバーフローしたことを示すために省略記号を使用します
- fade：オーバーフローしたテキストを透明にフェードさせます
- visible：オーバーフローしたテキストをコンテナの外にレンダリングします
clip はオーバーフローした後に切り捨て、ellipsis はオーバーフローした後に省略を表示し、fade はオーバーフローした後に尾部がフェードアウトし、visible はオーバーフローした後もレンダリングされます。下の図を参照してください。
ここで注意が必要なのは、overFlow が fade の場合、softWrap を false に設定した場合と設定しない場合の効果が異なります。設定しない場合、影の効果の方向は上から下ですが、設定した場合、影の効果はオーバーフローした尾部になります。下の図を参照してください。
style 属性#
style 属性では、背景色、フォントサイズ、フォントタイプと色、下線スタイルと色、高さ、文字間隔などを設定できます。具体的にはFlutter TextStyle Docドキュメントを参照してください。一般的な属性は以下の通りです。
- TextStyle
- backgroundColor：背景色
- color：フォント色
- decoration：装飾線のタイプ
- none：なし
- overline：テキストの上部
- lineThrough：テキストの中央
- underline：テキストの下部
- decorationColor：装飾線の色
- decorationStyle：装飾線のスタイル
- fontFamily：フォント
- fontSize：フォントサイズ
- fontStyle：フォントタイプ
- italic：イタリック
- normal：通常
- fontWeight：フォントの太さ
- height：テキストの各行の高さ、範囲（1～2）
- letterSpacing：テキスト間の間隔
使用例：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text widget',
home: Scaffold(
appBar: AppBar(title: Text('AppBarTitle')),
body: Center(
child: Text(
'overflowはfade、softWrapはfalse、maxLinesは1、Hello Flutter',
textAlign: TextAlign.left, // テキストの整列方法
textDirection: TextDirection.ltr, // テキストの整列方向
maxLines: 1, // 最大表示行数
overflow: TextOverflow.fade, // 最大行数を超えた後の効果
softWrap: false,
style: TextStyle(
backgroundColor: Color.fromARGB(255, 0, 255, 150), // 背景色
fontSize: 25.0, // フォントサイズ
fontStyle: FontStyle.normal, // フォントスタイル
fontWeight: FontWeight.bold, // フォントの太さ
letterSpacing: 1.0, // テキスト間の間隔
height: 1, // テキストの各行の高さ、範囲（1～2）
color: Color.fromARGB(255, 160, 160, 160), // フォント色
decoration: TextDecoration.lineThrough, // 装飾線のタイプ
decorationStyle: TextDecorationStyle.solid, // 装飾線のスタイル
decorationColor: Colors.red, // 装飾線の色
),
),
)));
}
}
効果は以下の通りです：
参考#
Flutter Api Doc
Flutter TextStyle Doc
Flutter 無料動画第 2 シーズン - よく使うコンポーネント