Flutter中万物皆是Widget,从本篇开始会逐步学习一些常用组件。而text一般是所有语言中最长见得组件,所以先从TextWidget学起。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Text Widget",
home: Scaffold(
body: Center(
child: Text(
"昨夜雨疏风骤,浓睡不消残酒。试问卷帘人,却道海棠依旧。知否,知否?应是绿肥红瘦。",
),
),
),
);
}
}
显示结果:
image.png
这个是textwidget最基本的用法,下面对其进行一些常用属性进行介绍。
TextAlign属性
TextAlign属性就是文本的对齐方式,它的属性值有如下几个:
center: 文本以居中形式对齐,这个也算比较常用的了。
left:左对齐,经常使用,让文本居左进行对齐,效果和start一样。
right :右对齐,使用频率也不算高。
start:以开始位置进行对齐,类似于左对齐。
end: 以为本结尾处进行对齐,有点类似右对齐.
maxLine属性
设置最多显示的行数
overflow属性
overflow属性是用来设置文本溢出时,如何处理,它有下面几个常用的值供我们选择。
clip:直接切断,剩下的文字就没有了,感觉不太友好,体验性不好。
ellipsis:在后边显示省略号,体验性较好,这个在工作中经常使用。
fade: 溢出的部分会进行一个渐变消失的效果,当然是上线的渐变,不是左右的。
style属性
style属性的内容比较多,具体的你可以查一下API,这里只说明一些常用的。
fontSize:设置字体大小
color:设置字体颜色
decoration:设置横线等(如上划线,下划线,删除线)
decorationStyle:设置横线的类型等(如虚线,实线,双行线)
设置属性后的代码
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Text Widget",
home: Scaffold(
body: Center(
child: Text(
"昨夜雨疏风骤,浓睡不消残酒。试问卷帘人,却道海棠依旧。知否,知否?应是绿肥红瘦。",
textAlign: TextAlign.start, //设置文字对齐方式
maxLines: 1, //最大行数
overflow: TextOverflow.ellipsis, //省略号
style: TextStyle(
fontSize: 25.0, //设置文字大小
color: Colors.redAccent, //设置文字颜色
decoration: TextDecoration.underline, //设置下划线
decorationStyle: TextDecorationStyle.solid,//设置下划线为实线
),
),
),
),
);
}
}
显示结果:
image.png