当前位置:网站首页>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)),
],
),
));
}
}
边栏推荐
- Common gadgets of Shell (sort, uniq, tr, cut)
- 索引index
- 1小时直播招募令:行业大咖干货分享,企业报名开启丨量子位·视点
- 字符串转换整数 (atoi)
- 二叉树的序列化和反序列化
- 用皮肤“听”音乐,网友戴上这款装备听音乐会:仿佛住在钢琴里
- The batch size does not have to be a power of 2!The latest conclusions of senior ML scholars
- Ways to prevent data fraud
- 非科班AI小哥火了:他没有ML学位,却拿到DeepMind的offer
- win10编译x264库(也有生成好的lib文件)
猜你喜欢
[Interview high-frequency questions] Linked list high-frequency questions that can be gradually optimized
Shell之常用小工具(sort、uniq、tr、cut)
链表噩梦之一?5000多字带你弄清它的来龙去脉
Here comes the question: Can I successfully apply for 8G memory on a machine with 4GB physical memory?
ansible-cmdb友好展示ansible收集主机信息
Byte Qiu Zhao confused me on both sides, and asked me under what circumstances would the SYN message be discarded?
智驾科技完成C1轮融资,此前2轮已融4.5亿元
8、IDEA提交代码出现: Fetch failed fatal: Could not read from remote repository
JD.com architects tidy up: what are the core technical knowledge points of jvm and performance tuning
十分钟教会你如何使用VitePress搭建及部署个人博客站点
随机推荐
GPT-3组合DALL·E,60秒内搞定游戏设定和原型动画!网友看后:这游戏想玩
API调用,API传参,面向对接开发,你真的会写接口文档吗?
信息系统项目管理师必背核心考点(六十三)项目组合管理的主要过程&DIPP分析
AQS同步组件-FutureTask解析和用例
链表噩梦之一?5000多字带你弄清它的来龙去脉
go基础之web获取参数
ABAP 报表中如何以二进制方式上传本地文件试读版
26、管道参数替换命令xargs
腾讯欲成育碧最大股东/ 米哈游招NLP内容生成研究员/ AI发现四千余物种濒临灭绝...今日更多新鲜事在此...
金融业“限薪令”出台/ 软银出售过半阿里持仓/ DeepMind新实验室成立... 今日更多新鲜事在此...
8、IDEA提交代码出现: Fetch failed fatal: Could not read from remote repository
LeetCode热题(11.合并两个有序链表)
IDEA close/open reference prompt Usages
两分钟录音就可秒变语言通!火山语音音色复刻技术如何修炼而成?
超越CLIP的多模态模型,只需不到1%的训练数据!南加大最新研究来了
win10编译x264库(也有生成好的lib文件)
问题来了:4GB物理内存的机器上申请8G内存能成功吗?
GRPC整体学习
阿里云新增三大高性能计算解决方案,助力生命科学行业快速发展
手写大根堆