Flutter 的 Text widget 可以用來做簡易的文字顯示。
其建構子如下：
Text(String data, { Key key, TextStyle style, TextAlign textAlign, TextDirection textDirection, bool softWrap, TextOverflow overflow, double textScaleFactor, int maxLines })
屬性如下：
| Name | Type | Description |
|---|---|---|
| data | String | The text to display. |
| maxLines | int | An optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to overflow. |
| overflow | TextOverflow | How visual overflow should be handled. |
| softWrap | bool | Whether the text should break at soft line breaks. |
| style | TextStyle | If non-null, the style to use for this text. |
| textAlign | TextAlign | How the text should be aligned horizontally. |
| textDirection | TextDirection | The directionality of the text. |
| textScaleFactor | double | The number of font pixels for each logical pixel. |
| hashCode | int | The hash code for this object. |
| key | Key | Controls how one widget replaces another widget in the tree. |
| runtimeType | Type | A representation of the runtime type of the object. |
方法如下：
| Name | Return Type | Description |
|---|---|---|
| build(BuildContext context) | Widget | Describes the part of the user interface represented by this widget. |
| debugFillProperties(DiagnosticPropertiesBuilder description) | void | |
| createElement() | StatelessElement | Creates a StatelessElement to manage this widget’s location in the tree. |
| debugDescribeChildren() | List | Returns a list of DiagnosticsNode objects describing this node’s children. |
| noSuchMethod(Invocation invocation) | dynamic | Invoked when a non-existent method or property is accessed. |
| toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) | DiagnosticsNode | Returns a debug representation of the object that is used by debugging tools and by toStringDeep. |
| toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) | String | Returns a string representation of this object. |
| toStringDeep({String prefixLineOne: ‘’, String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) | String | Returns a string representation of this node and its descendants. |
| toStringShallow({String joiner: ‘, ‘, DiagnosticLevel minLevel: DiagnosticLevel.debug }) | String | Returns a one-line detailed description of the object. |
| toStringShort() | String | A short, textual description of this widget. |
使用時如果沒什麼特殊的需求，那麼只要在建置 Text widget 時透過建構子帶入要顯示的文字即可。
如果要控制文字的排列，可以設定 textAlign，若要設定文字顯示的比例，可以設定 textScaleFactor。
import 'package:flutter/material.dart';
void main() {
runApp(
new Text(
'Hello, world!',
textDirection: TextDirection.ltr,
textAlign: TextAlign.center,
textScaleFactor: 2.0,
)
);
}
如果要對文字的樣式做調整，可以設定 style，像是設定字型的話可以設定 Style 的 fontFamily。
import 'package:flutter/material.dart';
void main() {
runApp(
new Text(
'Hello, world!',
textDirection: TextDirection.ltr,
textAlign: TextAlign.center,
style: new TextStyle(fontFamily: 'Raleway')
)
);
}
要設定文字為粗體的話，可以設定 Style 的 fontWeight 為 FontWeight.bold。
import 'package:flutter/material.dart';
void main() {
runApp(
new Text(
'Hello, world!',
textDirection: TextDirection.ltr,
textAlign: TextAlign.center,
style: new TextStyle(fontWeight: FontWeight.bold)
)
);
}
要設定文字顏色的話，可設定 Style 的 color。
import 'package:flutter/material.dart';
void main() {
runApp(
new Text(
'Hello, world!',
textDirection: TextDirection.ltr,
textAlign: TextAlign.center,
style: new TextStyle(color: Colors.yellow)
)
);
}
要設定文字底線的話，可以設定 Style 的 decoration，並用 decorationColor 設定其顏色，用 decorationStyle 設定樣式。
import 'package:flutter/material.dart';
void main() {
runApp(
new Text(
'Hello, world!',
textDirection: TextDirection.ltr,
textAlign: TextAlign.center,
style: new TextStyle(
decoration: TextDecoration.underline,
decorationColor: Colors.red,
decorationStyle: TextDecorationStyle.wavy)
)
);
}
