Text-文本组件
截屏2021-01-01 上午11.08.35.png
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
/**
* 文本框 例子
*/
class TextWigetDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
Text("这是普通文本"), // 普通字符串
Text(
"测试超出文本，超出部分省略号表示！测试超出文本，超出部分省略号表示！测试超出文本，超出部分省略号表示！测试超出文本，超出部分省略号表示！",
overflow: TextOverflow.ellipsis, // 文本超出部分显示省略号
),
Text(
"文本样式",
textAlign: TextAlign.center, // 文本对齐方式
style: TextStyle(
// 文本样式
fontWeight: FontWeight.bold, // 样式加粗
color: Colors.red, // 红色字体
fontSize: 20, // 字体大小
fontStyle: FontStyle.italic // 斜体
softWrap: true, // 文本自动换行
// fontFamily: '', // 设置字体库
), // 文本样式
),
],
),
);
}
}
Text("这是普通文本"), // 普通字符串
注意：Text组件一定要包裹在Scaffold组件下（也有其他方式，就自己调整样式）
属性:
style属性：文本的样式在style中设置，类型为TextStyle，TextStyle中包含很多文本样式属性，下面介绍一些常用的。
- fontWeight: FontWeight.bold, // 样式加粗
- color: Colors.red, // 红色字体
- fontSize: 20, // 字体大小
- fontStyle: FontStyle.italic // 斜体
- softWrap: true, // 文本自动换行
textAlign属性：(使用方式TextAlign.left)
- left：左对齐
- right：右对齐
- center：居中
- justify：两端对齐，此属性中文存在bug（Flutter版本：1.17.3）也可以在官方issue中关注此问题
- start：前端对齐，和
TextDirection属性有关，如果设置TextDirection.ltr，则左对齐，设置TextDirection.rtl则右对齐。 - end：末端对齐，和
TextDirection属性有关，如果设置TextDirection.ltr，则右对齐，设置TextDirection.rtl则左对齐。
overflow属性：（使用方式TextOverflow.ellipsis）
- clip：直接裁剪。
- fade：越来越透明。
- ellipsis：省略号结尾。
- visible：依然显示，此时将会溢出父组件。
