Flutter文本控件与样式[践]

Text

1.1 Text简介

Text: 单一格式的文本 使用比较多的 , 相当于 android 中的TextView

1.2 基本属性

  • data 要显示的文本,必填参数 String
  • style 用于指定文本显示的样式如字体大小,颜色等,字体默认的大小是 14 ,默认样式会继承层级最为接近的 DefaultTextStyle 如果再加样式。有两种情况:
    • TextStyle.inherit = true 相当于继承 最为接近的DefaultTextStyle ,比如要让DefaultTextStyle的字体大小,颜色一样,直接再设置个粗体即可
    • TextStyle.inherit = false 完全重写了样式
  • strutStyle
  • textAlign 对齐方式,
    • TextAlign.left : 对齐容器左边缘的 Text
    • TextAlign.right : 对齐容器右边缘的 Text
    • TextAlign.center : 对齐容器中心的 Text
    • TextAlign.justify (感觉很少用): 拉伸以结束的文本行以填充容器的宽度(暂时不知道怎么用)
    • TextAlign.start (感觉很少用):对齐容器前缘的 Text。对于从左到右的文本([TextDirection.ltr]),这是左边缘,对于从右到左的文本([TextDirection.rtl]),这是右边缘
    • TextAlign.end (感觉很少用):对齐容器尾部边缘的 Text。/对于从左到右的文本([TextDirection.ltr]),这是右边缘。对于从右到左的文本([TextDirection.rtl]),这是左边缘
  • textDirection 文本方向
  • softWrap 是否允许换行 false 表示 只显示一行,如果设置了 maxLines 此属性失效
  • overflow 文本显示的截断方式
  • textScaleFactor 文本的缩放比例
  • maxLines text显示的最大行数
  • semanticsLabel 暂时不知道什么用

    1.3 demo

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    import 'package:flutter/material.dart';

    class TextDemo extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
    color: Colors.red,
    width: 200,
    height: 200,
    child: Text(
    "1234561222222222222222222222222222333222ssssssssssssssssss",
    textAlign: TextAlign.left,
    // 对齐方式
    // textDirection: TextDirection.ltr, // 文本流向
    softWrap: false, // 是否允许换行 , 如果设置了 maxLines 此属性失效
    overflow: TextOverflow.ellipsis,
    // 文本的截断方式
    // TextOverflow.ellipsis 以三个点结尾 ,
    // TextOverflow.clip(默认的截断方式)强制截断,没有任何商量
    // TextOverflow.fade 褪色的截断
    textScaleFactor: 2,// 放大比例(估计一般用不到,一般直接设置 style 来设置 大小
    maxLines:3, // 最大的行数
    // semanticsLabel: "adfadsfasdf", (暂时不知道什么用)
    ));
    }
    }

TextStyle

Text 的 样式

2.1 主要属性

  • inherit = true 默认样式会继承层级最为接近的 DefaultTextStyle,为true 表示继承,false 表示完全重写
  • color 字体颜色,注意: 如果有特殊的foreground,此值必须是null
  • fontSize 字体大小 默认的是 14
  • fontWeight 字体的粗细程度 FontWeight.w100 – FontWeight.w900 . 默认是FontWeight.w400,FontWeight.w700 属于正常加粗
  • fontStyle FontStyle.normal正常 FontStyle.italic斜体
  • letterSpacing 单个字母或者汉字的距离,默认是1.0,负数可以拉近距离
  • wordSpacing 单词之间添加的空间间隔,负数可以拉近距离
  • textBaseline 对齐text的水平线:
    • TextBaseline.ideographic用来对齐表意文字的水平线
    • TextBaseline.alphabetic 以标准的字母顺序为基线
  • height 文本的高度 主要用于[TextSpan] 来设置不同的高度
  • foreground text的前景色,与 color 不能同时设置
  • background text的背景色
  • shadows 将在文本下方绘制的[阴影]列表
  • decoration 划线,
    • TextDecoration.none 没有
    • TextDecoration.underline 下划线
    • TextDecoration.overline 上划线
    • TextDecoration.lineThrough 中间的线(删除线)
  • decorationColor decoration划线的颜色
  • decorationStyle decoration划线的样式
    • TextDecorationStyle.solid 实线
    • TextDecorationStyle.double 画两条线
    • TextDecorationStyle.dotted 点线(一个点一个点的)
    • TextDecorationStyle.dashed 虚线(一个长方形一个长方形的线)
    • TextDecorationStyle.wavy 正玄曲线
  • debugLabel 只在调试的使用

    2.2 图片

alt text

2.3 代码demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
class TextStyleDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
Paint paintBlue = Paint();
paintBlue.color = Colors.blue;
Paint paintRed = Paint();
paintRed.color = Colors.red;
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text("TextStyle"),centerTitle: true,),
body: Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"inherit=false时 默认的文字颜色是白色,相当于完全重新样式",
style: TextStyle(inherit: false, color: Colors.red),
),
Divider(),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
"fontWeight: ",
style: TextStyle(fontWeight: FontWeight.w700),
),
Text(
"FontWeight.w400(默认)",
style: TextStyle(fontWeight: FontWeight.w400),
),
Text(
"FontWeight.w700(正常加粗)",
style: TextStyle(fontWeight: FontWeight.w700),
),
],
),
Divider(),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
"fontStyle: ",
style: TextStyle(fontWeight: FontWeight.w700),
),
Text(
"FontStyle.normal(正常)",
style: TextStyle(fontStyle: FontStyle.normal),
),
Text(
"FontStyle.italic(斜体)",
style: TextStyle(fontStyle: FontStyle.italic),
),
],
),
Divider(),
Text(
"letterSpacing,每个字符的间距",
style: TextStyle(letterSpacing: 4),
),
Divider(),
Text(
"wordSpacing 单词 每个单词之间的距离(相当于给空格设置的距离)",
style: TextStyle(wordSpacing: 10),
),
Divider(),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
"textBaseline: ",
style: TextStyle(fontWeight: FontWeight.w700),
),
Text(
"TextBaseline.ideographic",
style: TextStyle(textBaseline: TextBaseline.ideographic),
),
Text(
" TextBaseline.alphabetic",
style: TextStyle(textBaseline: TextBaseline.alphabetic),
),
],
),
Divider(),
Text(
"foreground 相当于设置paint,来绘制文字",
style: TextStyle(foreground: paintBlue),
),
Divider(),
Text(
"background 文本的背景",
style: TextStyle(background: paintRed),
),
Divider(),
Text(
"shadows 文本的阴影",
style: TextStyle(shadows: [
BoxShadow(
color: Colors.grey, offset: Offset(-1, -1), blurRadius: 5)
]),
),
Divider(),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
"decoration: ",
style: TextStyle(fontWeight: FontWeight.w700),
),
Text(
"TextDecoration.overline(上划线)",
style: TextStyle(decoration: TextDecoration.overline),
),
Text(
"TextDecoration.none(没有划线)",
style: TextStyle(decoration: TextDecoration.none),
),
Text(
"TextDecoration.underline(下划线)",
style: TextStyle(decoration: TextDecoration.underline),
),
Text(
"TextDecoration.lineThrough(中划线,删除线)",
style: TextStyle(
decoration: TextDecoration.lineThrough,
textBaseline: TextBaseline.alphabetic),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
"decorationStyle: ",
style: TextStyle(fontWeight: FontWeight.w700),
),
Text(
"TextDecorationStyle.solid(实线)",
style: TextStyle(
decoration: TextDecoration.lineThrough,
decorationStyle: TextDecorationStyle.solid),
),
Text(
"TextDecorationStyle.double(两条线)",
style: TextStyle(
decoration: TextDecoration.lineThrough,
decorationStyle: TextDecorationStyle.double),
),
],
),
],
)),
);
}
}