Text组件常用属性
| 属性 | 描述 |
|---|---|
| data | 必填项 文本信息 |
| style | 文本的样式信息 |
| strutStyle | 文本字体的样式信息 |
| textAlign | 文本应如何水平对齐 |
| textDirection | 相对TextAlign中的start、end而言有用（当start使用了ltr相当于end使用了rtl，也相当于TextAlign使用了left） |
| softWrap | 某一行中文本过长，是否需要换行。默认为true， |
| overflow | 如何处理视觉溢出 |
| textScaleFactor | 每个逻辑像素的字体像素数 |
| maxLines | 本要跨越的可选最大行数 |
TextStyle style 文本样式
| 属性 | 说明 |
|---|---|
| Color color | 文本颜色。如果指定了foreground，则此值必须为null。 |
| TextDecoration decoration | 绘制文本装饰: 下划线（TextDecoration.underline） 上划线 TextDecoration.overline） 删除线（TextDecoration.lineThrough） 无（TextDecoration.none） |
| Color decorationColor | 绘制文本装饰的颜色 |
| TextDecorationStyle decorationStyle | 绘制文本装饰的样式: 画一条虚线 TextDecorationStyle.dashed 画一条虚线 TextDecorationStyle.dotted 画两条线 TextDecorationStyle.double 画一条实线 TextDecorationStyle.solid 画一条正弦线(波浪线) TextDecorationStyle.wavy |
| FontWeight fontWeight | 绘制文本时使用的字体粗细: FontWeight.bold 常用的字体重量比正常重。w700 FontWeight.normal 默认字体粗细。w400 FontWeight.w100 薄，最薄 FontWeight.w200 特轻 FontWeight.w300 轻 FontWeight.w400 正常/普通/平原 FontWeight.w500 较粗 FontWeight.w600 半粗体 FontWeight.w700 加粗 FontWeight.w800 特粗 FontWeight.w900 最粗 |
| FontStyle fontStyle | 字体变体： FontStyle.italic 使用斜体 FontStyle.normal 使用直立 |
| TextBaseline textBaseline | 对齐文本的水平线:TextBaseline.alphabetic：文本基线是标准的字母基线TextBaseline.ideographic：文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。 |
| String fontFamily | 使用的字体名称（例如，Roboto）。如果字体是在包中定义的，那么它将以'packages / package_name /'为前缀（例如'packages / cool_fonts / Roboto'） |
| double fontSize | 字体大小(pt、sp)，默认为14个逻辑像素(14pt、14sp) |
| double letterSpacing | 水平字母之间的空间间隔（逻辑像素为单位）。可以使用负值来让字母更接近。 |
| double wordSpacing | 单词之间添加的空间间隔（逻辑像素为单位）。可以使用负值来使单词更接近。 |
| double height | 文本行与行的高度，作为字体大小的倍数（取值1~2，如1.2） |
| Locale local | 此属性很少设置，用于选择区域特定字形的语言环境 |
| Paint background | 文本背景色 |
| Paint foreground | 文本的前景色，不能与color共同设置（比文本颜色color区别在Paint功能多，后续会讲解） |
| List<Shadow> shadows | 详解:Flutter Decoration背景设定（边框、圆角、阴影、形状、渐变、背景图像等） |
TextAlign
文本应如何水平对齐enum：
- TextAlign.center :将文本对齐容器的中心。
- TextAlign.end:对齐容器后缘上的文本。
- TextAlign.justify:拉伸以结束的文本行以填充容器的宽度。即使用了decorationStyle才起效
- TextAlign.left:对齐容器左边缘的文本。
- TextAlign.right:对齐容器右边缘的文本。
- TextAlign.start:对齐容器前缘上的文本。
StrutStyle
先来理解一下这张图（字体）
字体
演示效果
简单效果图
代码如下
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("标题"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
"hello world",
textAlign: TextAlign.start,
style: TextStyle(color: Colors.green),
),
Text(
"hello world" * 10,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
Text(
"hello world",
textScaleFactor: 1.5,
semanticsLabel:"fasdhfadfadd"
),
Text(r'$$', semanticsLabel: 'Double dollars'),
Text.rich(TextSpan(children: [
TextSpan(text: "home:"),
TextSpan(
text: "https://flutterchina.club",
style: TextStyle(color: Colors.blue)),
WidgetSpan(child: Icon(Icons.home))
]))
],
),
),
);
}
}
