Flutter series overall directory
Article Directory
Learning to use a Widget best way is to look directly at the source of the comment, basic usage which are introduced clear.
Text has two constructors, properties only nine, a very simple control.
1、Text
| Attributes | Explanation |
|---|---|
| textAlign | 对齐：left、start、right、end、center、justify |
| textDirection | TextDirection.ltr: From left to right, TextDirection.rtl: from right to left |
| softWrap | Whether Wrap |
| overflow | Interception section shows: clip: direct interception fade: Fade ellipsis: ellipsis omitted part is based on the word as a unit, instead of letters, such as hello worddfsa fdafafsasfs, display hello ... |
| textScaleFactor | Font scaling |
| maxLines | The maximum number of rows to display |
| semanticsLabel | Who knows what is the use ah |
2、TextStyle
| Attributes | Explanation |
|---|---|
| inherit | Inherit the parent component attributes, default true, this property is set to false rarely needed, is set to false default font is white, 10pixels |
| color | Font color, you can see how to set it: https://blog.csdn.net/mengks1987/article/details/84819431 |
| fontSize | (Logic) font size, default 14, are matched to different screen? Make a question mark needs to be verified |
| fontWeight | Font-weight property is generally used: FontWeight normal (default), FontWeight bold (bold) |
| fontStyle | Font: normal and italic |
| fontFamily | Set font differences, the attention and fontStyle |
| letterSpacing | Letter spacing, default 0, the smaller the negative pitch, the greater the positive number of pitches |
| wordSpacing | Word spacing, default 0, the smaller the negative pitch, the greater the positive number of pitches, and the difference between letterSpacing attention, such as hello, h, e, l, l, o are each a letter, a word Hello |
| text baseline | Font baseline, baseline can look at this concept: https://blog.csdn.net/hanyingjie327/article/details/22799811 |
| height | Multiplied by fontSize as row height |
| locale | Settings area, the default system areas |
| foreground | Front, value is Paint, set the foreground, color must be null |
| background | Background, attention is Paint |
| shadows | shadow |
| decoration | Text crossed: underline, overline, underlined |
| decorationColor | Dash color |
| decorationStyle | Dash style: dotted line, double line, etc. |
3、textSpan
Role is a word appears as a different style
Text.rich(
TextSpan(
text: 'Hello', //
children: <TextSpan>[
TextSpan(
text: ' beautiful ',
style: TextStyle(fontStyle: FontStyle.italic)),
TextSpan(
text: 'world',
style: TextStyle(fontWeight: FontWeight.bold)),
],
),
)
4、demo
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)),
],
),
)
],
)
],
);
}
}
