1. 文章目录
1.Text 构造方法及属性
image.png
可以看到，data是必填参数，其他的都是可选参数，下面我们来看看Text类中的常用属性
| 属性 | 作用 | 值所属类型 |
|---|---|---|
| data | Text显示的文本，必填参数 | String |
| textAlign | 文本的对齐方式 | TextAlign |
| maxLines | 文本显示的最大行数 | int |
| overflow | 文本显示的截断方式 | TextOverflow |
| textScaleFactor | 文本的缩放比例 | TextOverflow |
| style | 文本显示的样式如颜色、字体、粗细、背景等 | TextStyle |
- 1.1 Text
Text用于显示简单样式文本，它包含一些控制文本显示样式的一些属性，一个简单的例子如下：
Text("Hello world",
textAlign: TextAlign.left,
);
Text("Hello world! I'm Jack. "*4,
maxLines: 1,
overflow: TextOverflow.ellipsis,
);
Text("Hello world",
textScaleFactor: 1.5,
);
运行效果如图3-5所示：
image.png
2. Style
style接收一个TextStyle类型的值，我们先来看一下TextStyle类中的属性
TextStyle copyWith({
Color color,
String fontFamily,
double fontSize,
FontWeight fontWeight,
FontStyle fontStyle,
double letterSpacing,
double wordSpacing,
TextBaseline textBaseline,
double height,
Locale locale,
Paint foreground,
Paint background,
List<ui.Shadow> shadows,
TextDecoration decoration,
Color decorationColor,
TextDecorationStyle decorationStyle,
String debugLabel,
})
常用属性
| 属性 | 作用 | 值所属类型 |
|---|---|---|
| color | 设置文本的颜色 | Color |
| fontSize | 设置字体大小 | double |
| fontWeight | 字体的加粗权重 | FontWeight |
| fontStyle | 文本显示样式 | FontStyle |
| letterSpacing | 单词之间的间距 | double |
| wordSpacing | 字母之间的间距 | double |
| height | 行高，需要注意的是这里的值是个比例值 | double |
我们来用几个属性看看效果
Text(
"Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.",
style: TextStyle(
color: Colors.red,
fontSize: 18,
letterSpacing: 1,
wordSpacing: 2,
height: 1.2,
fontWeight: FontWeight.w600
),
);
效果如下：
image.png
3 .textAlign
textAlign的值的类型是TextAlign ，TextAlign是一个枚举，值如下，比较简单就不贴代码了
enum TextAlign { left, right, center, justify,start, end,}
left |start
left和start效果一致，左对齐
image.png
center
居中对齐
image.png
right | end
right和end都是右对齐
image.png
justify
类似一种填充满宽度的效果
image.png
4.maxLines
Text(
"Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.",
style: TextStyle(
color: Colors.red,
fontSize: 18,
letterSpacing: 1,
wordSpacing: 2,
height: 1.2,
fontWeight: FontWeight.w600),
textAlign: TextAlign.justify,
maxLines: 3,
);
可以看到，只显示了三行
image.png
5.overflow
文本的截断方式，接收一个TextOverflow 类型的值
enum TextOverflow { clip, fade, ellipsis,}
clip
默认的截断方式，直接根据容器大小截断
fade
最下面的一行有一点渐隐的效果，这里为了看的清楚点字体放大了些
image.png
ellipsis
截断处为省略符的形式
image.png
还有一些其他的属性不太常用，这里就不介绍了，自己可以去试试看看是什么效果。
TextSpan
TextSpan跟Text的区别就在于TextSpan是分片，我们可以把一串字符串分为几个片段来管理，每个片段可以单独设置样式。
我们再来看看TextSpan的构造方法
const TextSpan({
this.style,
this.text,
this.children,
this.recognizer,
});
final TextStyle style;
final String text;
final List<TextSpan> children;
final GestureRecognizer recognizer;
其中style 跟上面的Text的style一致，用来设置样式，text就是要显示的文本内容。 children是一个TextSpan的数组，不能为空，recognizer是用来处理手势的
下面我们来用一用，下面的代码如果你觉得嵌套的层次多，可以把TextSpan再封一下，这里我就直接这么写了。
/*TextSpan
* 文本片段，可以对文本片段单独设置样式
* */
class MyTextSpan extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text.rich(
TextSpan(
children: [
TextSpan(
text: "网址:",
style: TextStyle(
color: Colors.black,
fontSize: 24,
fontWeight: FontWeight.bold,
)),
TextSpan(
text: "http//:baidu.com/",
style: TextStyle(
color: Colors.blue,
fontSize: 24,
fontStyle: FontStyle.italic,
),
),
],
),
);
}
}
来看一看效果
image.png
Container(
margin: EdgeInsets.only(top: 8.0),
child: RichText(
text: TextSpan(children: <TextSpan>[
TextSpan(
text: "￥",
style: TextStyle(
color: Colors.pinkAccent,
fontSize: ScreenUtil().setSp(40))),
TextSpan(
text: "${goodsItem.actualPrice}",
style: TextStyle(
color: Colors.pinkAccent,
fontSize: ScreenUtil().setSp(70),
fontWeight: FontWeight.w600)),
TextSpan(
text: " 券后价 ",
style: TextStyle(
color: Colors.pinkAccent,
fontSize: ScreenUtil().setSp(40))),
TextSpan(
text: "原价${goodsItem.originalPrice}",
style: TextStyle(
color: Colors.black38,
decoration: TextDecoration.lineThrough,
fontSize: ScreenUtil().setSp(40))),
]),
),
)
展示效果：
image.png
DefaultTextStyle
在Flutter的widget树中，文本的样式默认是可以被继承的，这点跟css很像，父节点的文本样式子节点默认会继承，如果子节点中重新设置了默认样式的某些属性，那么则以子节点设置的为准。我们也可以通过设置inherit: false 不继承父节点的默认样式。
/*带有默认样式的Text*/
class MyDefaultStyleText extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTextStyle(
/*这里我们设置了一些默认的样式*/
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 30,
color: Colors.grey,
letterSpacing: 1,
wordSpacing: 3,
fontWeight: FontWeight.bold,
),
/*子节点就会默认继承父节点的样式，如果子节点重新设置了父节点中已设置的样式，那么以子节点设置的样式为准*/
child: Column(
children: <Widget>[
Text(
"text 1",
style: TextStyle(
/*这里我们重新指定一下颜色，那么最终的颜色就以子节点的设置为准*/
color: Colors.deepOrange,
),
),
Text(
"text 2",
style: TextStyle(
inherit: false,//inherit设为false表示不继承父节点默认样式，默认值为true
color: Colors.blue,
),
),
],
));
;
}
}
运行效果图如下
image.png
好了，Text Widget相关的内容大概就这么多。更详细的请看官方文档
