本篇文章会介绍 Flutter 里常用的 UI 控件 – 文本。
1. Text
Text 用于显示简单样式文本，它包含一些控制文本显示样式的一些属性。
1.1 属性
const Text(
this.data, {
Key key,
this.style, // 字体样式
this.strutStyle,
this.textAlign, // 文字对齐
this.textDirection, // 文字方向
this.locale,
this.softWrap, // 自动换行，默认是 true，自动换行
this.overflow, // 溢出样式
this.textScaleFactor, // 字体倍数，字体大小 * textScaleFactor
this.maxLines, // 最大行数
this.semanticsLabel,
this.textWidthBasis,
})
1.2 实例代码
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('文本及样式'),
),
body:Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text("1.Text",
textScaleFactor: 1.5,
),
const Text("hello,I'm Kevin"),
Text("少壮不努力，老大徒伤悲。" * 3,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
)
)
);
}
}
1.3 效果图
2. TextStyle
TextStyle 用于指定文本显示的样式如颜色、字体、粗细、背景等。
2.1 属性
const TextStyle({
this.inherit = true, // 为false 的时候不显示
this.color, // 颜色
this.backgroundColor,
this.fontSize, // 字号
this.fontWeight, // 字重，加粗也用这个字段 FontWeight.w700
this.fontStyle, // FontStyle.normal FontStyle.italic斜体
this.letterSpacing, // 字符间距 就是单个字母或者汉字之间的间隔，可以是负数
this.wordSpacing, // 段落间距，以空格为准
this.textBaseline, // 基线，两个值，字面意思是一个用来排字母的，一人用来排表意字的（类似中文）
this.height, // 当用来Text控件上时，行高（会乘以fontSize,所以不以设置过大）
this.locale,
this.foreground,
this.background,
this.shadows,
this.fontFeatures,
this.decoration, // 添加上划线，下划线，删除线
this.decorationColor, // 划线的颜色
this.decorationStyle, // 这个style可能控制画实线，虚线，两条线，点, 波浪线等
this.decorationThickness,
this.debugLabel,
String fontFamily, // 字体
List<String> fontFamilyFallback,
String package,
})
2.2 实例代码
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('文本及样式'),
),
body:Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text("2.TextStyle",
textScaleFactor: 1.5,
),
Text("一份耕耘，一份收获。",
style: TextStyle(
color: Colors.blue,
fontSize: 18.0,
height: 1.2,
fontFamily: "Courier",
background: Paint()..color=Colors.yellow,
decoration:TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed
),
),
],
)
)
);
}
}
2.3 效果图
3. TextSpan
Text 的所有文本内容只能按同一种样式，如果我们需要对一个 Text 内容的不同部分按照不同的样式显示，这时就可以使用 TextSpan，它代表文本的一个“片段”。
3.1 属性
const TextSpan({
TextStyle style, //该文本片段的样式
Sting text, //该文本片段的内容
List<TextSpan> children, // 是一个TextSpan的数组，也就是TextSpan可以包括其他TextSpan
GestureRecognizer recognizer, // 用于对该文本片段上用于手势进行识别处理。
});
3.2 实例代码
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('文本及样式'),
),
body:Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text("3.TextSpan",
textScaleFactor: 1.5,
),
const Text.rich(TextSpan(
children: [
TextSpan(
text: "我的 CSDN 博客: "
),
TextSpan(
text: "https://blog.csdn.net/duoduo_11011",
style: TextStyle(
color: Colors.blue
),
),
]
)),
],
)
)
);
}
}
3.3 效果图
