記事のディレクトリ
ウィジェットの最良の方法を使用することを学ぶことは、コメントのソースに直接、明確な導入されている基本的な使い方を見ることです。
テキストは2つのコンストラクタ、プロパティのみ9、非常に単純なコントロールを持っています。
1、テキスト
| プロパティ | 説明 |
|---|---|
| textAlign | 对齐：左、スタート、右、終わり、中央、正当化 |
| textDirection | TextDirection.ltr：左から右へ、TextDirection.rtl：右から左へ |
| softWrap | かどうかラップ |
| オーバーフロー | 傍受部ショー：クリップ：直接傍受フェード：フェード省略記号：省略記号省略部分は代わりにそのようなハローworddfsaのfdafafsasfs、表示ハローとして文字の単位として単語に基づいており... |
| textScaleFactor | フォントスケーリング |
| MAXLINES | ディスプレイへの行の最大数 |
| semanticsLabel | 誰がああ使用が何であるかを知っています |
2、TEXTSTYLE
| プロパティ | 説明 |
|---|---|
| 継承 | 継承コンポーネントの属性、デフォルト真は、このプロパティはほとんど必要ありませんfalseに設定されている親、偽のデフォルトのフォントに設定されているが白で、10pixels |
| 色 | フォントの色、あなたがそれを設定する方法を見ることができます。https://blog.csdn.net/mengks1987/article/details/84819431 |
| フォントサイズ | （ロジック）フォントサイズ、デフォルトの14は、別の画面に一致していますか？マークが検証される必要がある質問を確認します |
| たfontWeight | フォント量特性が一般的に用いられている：（デフォルト）たfontWeight通常は、（太字）太字たfontWeight |
| fontStyle | フォント：通常とイタリック |
| フォントファミリー | 設定されたフォントの違い、注意とのfontStyle |
| 文字間隔 | 文字間隔、デフォルトの0、ピッチの大きい正数、負のピッチより小さく |
| wordSpacing | 単語間隔、デフォルト0、小さい負ピッチ、大きなピッチの正の数、およびそのようなハロー、H、E、L、L、Oなどの注意を、letterSpacing差はそれぞれ文字、単語であるハロー |
| テキストのベースライン | フォントのベースライン、ベースラインがこの概念を見ることができます：https://blog.csdn.net/hanyingjie327/article/details/22799811 |
| 高さ | 行の高さとしてのfontSizeを乗じ |
| ロケール | 設定エリア、デフォルトのシステム領域 |
| 前景 | フロントには、値が設定され、フォアグラウンドをペイントされた、色はnullでなければなりません |
| バックグラウンド | 背景には、注意がペイントされます |
| 影 | 影 |
| デコレーション | 交差テキスト：下線、上線、下線 |
| decorationColor | ダッシュ色 |
| decorationStyle | ダッシュスタイル：点線、二重線など |
3、textSpan
役割は、単語が異なるスタイルとして表示されています
Text.rich(
TextSpan(
text: 'Hello', //
children: <TextSpan>[
TextSpan(
text: ' beautiful ',
style: TextStyle(fontStyle: FontStyle.italic)),
TextSpan(
text: 'world',
style: TextStyle(fontWeight: FontWeight.bold)),
],
),
)
4、デモ
import 'package:flutter/material.dart';
class TextDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
var paint = new Paint();
paint.color = Color(0xFF00FF00);
var shadowList = [
new Shadow(color: Color(0xFFFF0000), offset: Offset(3, 3), blurRadius: 3)
];
return Column(
children: <Widget>[
Row(
children: <Widget>[
Text('inherit=false:'),
Text(
'inherit=false',
style: TextStyle(inherit: false),
)
],
),
Row(
children: <Widget>[
Text('字体颜色:'),
Text(
'字体颜色是红色',
style: TextStyle(color: Color(0xFFFF0000)),
)
],
),
Row(
children: <Widget>[
Text('字体大小:'),
Text(
'字体大小默认',
),
Text(
'字体大小30',
style: TextStyle(fontSize: 30),
)
],
),
Row(
children: <Widget>[
Text('字体粗细:'),
Text(
'默认',
),
Text(
'粗体',
style: TextStyle(fontWeight: FontWeight.bold),
)
],
),
Row(
children: <Widget>[
Text('字体:'),
Text(
'字体-默认',
),
Text(
'字体-italic',
style: TextStyle(fontStyle: FontStyle.italic),
)
],
),
Row(
children: <Widget>[
Text('字母间距:'),
Text('字母间距默认'),
Text(
'字母间距:-5,absccc',
style: TextStyle(letterSpacing: -5),
),
Text(
'字母间距:5,absccc',
style: TextStyle(letterSpacing: 5),
)
],
),
Row(
children: <Widget>[
Text('单词间距:'),
Text('单词间距默认'),
Text(
'单词间距:-5,hello word',
style: TextStyle(wordSpacing: -5),
),
Text(
'单词间距:5,hello word',
style: TextStyle(wordSpacing: 5),
)
],
),
Row(
children: <Widget>[
Text('foreground:'),
Text(
'Paint 设置颜色为绿色',
style: TextStyle(foreground: paint),
)
],
),
Row(
children: <Widget>[
Text('background:'),
Text(
'背景设置为绿色',
style: TextStyle(background: paint),
)
],
),
Row(
children: <Widget>[
Text('阴影:'),
Text(
'背景阴影',
style: TextStyle(
shadows: shadowList,
),
)
],
),
Row(
children: <Widget>[
Text('文字划线:'),
Text(
'下划线',
style: TextStyle(
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed),
),
Text(
'上划线',
style: TextStyle(
decoration: TextDecoration.overline,
decorationStyle: TextDecorationStyle.dotted),
),
Text(
'中划线',
style: TextStyle(
decoration: TextDecoration.lineThrough,
decorationColor: Color(0xFFFF0000),
decorationStyle: TextDecorationStyle.double),
),
Text(
'中划线',
style: TextStyle(
decoration: TextDecoration.lineThrough,
decorationColor: Color(0xFFFF0000),
decorationStyle: TextDecorationStyle.solid),
)
],
),
Row(
children: <Widget>[
Text('对齐方式:'),
Container(
width: 300,
height: 50,
color: Color(0xFFFF0000),
child: Text(
'左对齐',
textAlign: TextAlign.left,
),
),
],
),
Row(
children: <Widget>[
Text('对齐方式:'),
Container(
width: 300,
height: 50,
color: Color(0xFFFF0000),
child: Text(
'右对齐',
textAlign: TextAlign.right,
),
),
],
),
Row(
children: <Widget>[
Text('对齐方式:'),
Container(
width: 300,
height: 50,
color: Color(0xFFFF0000),
child: Text(
'中间对齐',
textAlign: TextAlign.center,
),
),
],
),
Row(
children: <Widget>[
Text('对齐方式:'),
Container(
width: 300,
height: 50,
color: Color(0xFFFF0000),
child: Text(
'hello word \n dfsafdafafsasfs',
textAlign: TextAlign.justify,
),
),
],
),
Row(
children: <Widget>[
Text('方向：'),
Container(
width: 300,
height: 50,
color: Color(0xFFFF0000),
child: Text(
'hello word \n dfsafdafafsasfs',
textDirection: TextDirection.rtl,
),
),
],
),
Row(
children: <Widget>[
Text('overflow：fade'),
Container(
width: 100,
height: 50,
color: Color(0xFF00FF00),
child: Text(
'hello worddfsafdafafsasfs',
softWrap: false,
overflow: TextOverflow.fade,
),
),
],
),
Row(
children: <Widget>[
Text('overflow：ellipsis'),
Container(
width: 100,
height: 50,
color: Color(0xFF00FF00),
child: Text(
'hello word dfsa fdaf afs asfs',
softWrap: false,
overflow: TextOverflow.ellipsis,
),
),
],
),
Row(
children: <Widget>[
Text('semanticsLabel：'),
Container(
width: 400,
height: 50,
color: Color(0xFF00FF00),
child: Text(r'$$ Double dollars $$',
semanticsLabel: 'Double dollars'),
),
],
),
Row(
children: <Widget>[
Text.rich(
TextSpan(
text: 'Hello', //
children: <TextSpan>[
TextSpan(
text: ' beautiful ',
style: TextStyle(fontStyle: FontStyle.italic)),
TextSpan(
text: 'world',
style: TextStyle(fontWeight: FontWeight.bold)),
],
),
)
],
)
],
);
}
}
