当前位置:网站首页>Flutter入门进阶之旅(三)Text Widgets
Flutter入门进阶之旅(三)Text Widgets
2022-08-09 12:04:00 【谢栋_】
Text Widgets是Flutter中一个十分常用的一个Widget,类似于Android平台下的TextView,几乎在每个App的UI中都会或多或少的出现它的身影,让我们去一睹Text的风采吧!
- 简单Text使用
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new TextDemo()));
}
class TextDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Hello Flutter"),
),
body: new Center(
child: new Text(
"This is Flutter Widget ---- Text ,is a StatelessWidget",
style: new TextStyle(
fontStyle: FontStyle.italic,
fontSize: 20.0,
color: Colors.red,
),
textAlign: TextAlign.center,
)),
);
}
}
- 效果图
Flutter中的Text Widget跟Android平台下的TextView十分类似,我们也可以跟在原生Android平台下一样的指定Text显示的样式,文字大小,颜色等,来一起看一下Flutter中关于Text的构造方法,以及Text里面有哪些属性可供开发者自己定制。
const Text(this.data, { //Text显示的内容
Key key,
this.style, //Text显示的样式
this.textAlign,//文本应该如何水平对齐,TextAlign.start,end 或者center
this.textDirection, //文本方向,TextDirection.ltr\TextDirection.rtl
this.locale,
this.softWrap, //是否自动换行,若为false,文字将不考虑容器大小,单行显示,超出屏幕部分将默认截断处理
this.overflow, //当文字超出屏幕的时候,如何处理,TextOverflow.clip(裁剪)\TextOverflow.fade(渐隐)\TextOverflow.ellipsis(省略号)
this.textScaleFactor, //字体显示倍率,上面的例子使用的字体大小是20.0,将字体设置成10.0,然后倍率为2
this.maxLines, //最大行数设置
this.semanticsLabel,
})
上述的属性中,我们使用的最多的就是TextStyle属性了,比如我们想自己设定Text显示的颜色,大小,或者下划线、删除线等等各种各样的奇葩样式都可以通过TextStyle来指定,看下TextStyle的构造方法说明:
const TextStyle({
this.inherit: true, // 为false的时候不显示
this.color, // 颜色
this.fontSize, // 字号
this.fontWeight, // 字重,加粗也用这个字段 FontWeight.w700
this.fontStyle, // FontStyle.normal FontStyle.italic斜体
this.letterSpacing, // 字符间距 就是单个字母或者汉字之间的间隔,可以是负数
this.wordSpacing, // 字间距 句字之间的间距
this.textBaseline, // 基线,两个值,字面意思是一个用来排字母的,一人用来排表意字的(类似中文)
this.height, // 当用来Text控件上时,行高(会乘以fontSize,所以不以设置过大)
this.decoration, // 添加上划线,下划线,删除线
this.decorationColor, // 划线的颜色
this.decorationStyle, // 这个style可能控制画实线,虚线,两条线,点, 波浪线等
this.debugLabel,
String fontFamily, // 字体
String package,
})
TextStyle里面的样式我就不逐个为大家贴效果图了,读者可自行模拟测试下期基本用户,我贴上我的全部样例代码跟统一的效果图供大家参考。
- 效果图
- 上图的完整示例代码
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new TextDemo()));
}
class TextDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Hello Flutter"),
),
body: new Center(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Text(
'inherit: 为 false 的时候不显示',
style: new TextStyle(
fontSize: 18.0,
color: Colors.redAccent,
inherit: true,
),
),
new Text(
'color/fontSize: 字体颜色,字号等',
style: new TextStyle(
color: Color.fromARGB(255, 150, 150, 150),
fontSize: 22.0,
),
),
new Text(
'fontWeight: 字重',
style: new TextStyle(
fontSize: 18.0,
color: Colors.redAccent,
fontWeight: FontWeight.w700),
),
new Text(
'fontStyle: FontStyle.italic 斜体',
style: new TextStyle(
fontStyle: FontStyle.italic,
),
),
new Text(
'letterSpacing: 字符间距',
style: new TextStyle(
letterSpacing: 10.0,
// wordSpacing: 15.0
),
),
new Text(
'wordSpacing: 字或单词间距',
style: new TextStyle(
// letterSpacing: 10.0,
wordSpacing: 15.0),
),
new Text(
'textBaseline:这一行的值为TextBaseline.alphabetic',
style: new TextStyle(textBaseline: TextBaseline.alphabetic),
),
new Text(
'textBaseline:这一行的值为TextBaseline.ideographic',
style: new TextStyle(textBaseline: TextBaseline.ideographic),
),
new Text('height: 用在Text控件上的时候,会乘以fontSize做为行高,所以这个值不能设置过大',
style: new TextStyle(
height: 1.0,
)),
new Text('decoration: TextDecoration.overline 上划线',
style: new TextStyle(
fontSize: 18.0,
color: Colors.redAccent,
decoration: TextDecoration.overline,
decorationStyle: TextDecorationStyle.wavy)),
new Text('decoration: TextDecoration.lineThrough 删除线',
style: new TextStyle(
decoration: TextDecoration.lineThrough,
decorationStyle: TextDecorationStyle.dashed)),
new Text('decoration: TextDecoration.underline 下划线',
style: new TextStyle(
fontSize: 18.0,
color: Colors.redAccent,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dotted)),
],
),
));
}
}
边栏推荐
猜你喜欢
Double pointer - the role of char **, int **
web course design
放下手机吧:实验表明花20分钟思考和上网冲浪同样快乐
微信一面:一致性哈希是什么,使用场景,解决了什么问题?
Manchester city launch emotional intelligence scarf can be detected, give the fans
Shell之常用小工具(sort、uniq、tr、cut)
无需精子卵子子宫体外培育胚胎,Cell论文作者这番话让网友们炸了
Senior told me that the giant MySQL is through SSH connection
基于STM32+铂电阻设计的测温仪
【无标题】
随机推荐
数据挖掘-05
阿里云新增三大高性能计算解决方案,助力生命科学行业快速发展
水能自发变成“消毒水”,83岁斯坦福教授:揭示冬天容易得流感的部分原因...
Manchester city launch emotional intelligence scarf can be detected, give the fans
又有大厂员工连续加班倒下/ 百度搜狗取消快照/ 马斯克生父不为他骄傲...今日更多新鲜事在此...
全面了解什么是TPS、QPS以及两者的区别
"Digital Economy Panorama White Paper" Special Analysis of Banking Industry Intelligent Marketing Application Released
PM2 configuration file
Common gadgets of Shell (sort, uniq, tr, cut)
系统提供的堆 VS 手动改写堆
二叉树的序列化和反序列化
OpenSSF的开源软件风险评估工具:Scorecards
微信支付开发流程
1小时直播招募令:行业大咖干货分享,企业报名开启丨量子位·视点
Information system project managers must memorize the core test sites (63) The main process of project portfolio management & DIPP analysis
标准C语言学习总结14
AQS同步组件-FutureTask解析和用例
900页数学论文证明旋转的黑洞不会爆炸,丘成桐:30多年来广义相对论首次重大突破...
【微服务~远程调用】整合RestTemplate、WebClient、Feign
苹果Meta都在冲的Pancake技术,中国VR团队YVR竟抢先交出产品答卷