当前位置:网站首页>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)),
],
),
));
}
}
边栏推荐
- 手写大根堆
- Gumbel_Softmax 概要
- JD.com architects tidy up: what are the core technical knowledge points of jvm and performance tuning
- Resolved IndentationError: unindent does not match any oute r indentation Level
- 金融业“限薪令”出台/ 软银出售过半阿里持仓/ DeepMind新实验室成立... 今日更多新鲜事在此...
- 非科班AI小哥火了:他没有ML学位,却拿到DeepMind的offer
- 系统提供的堆 VS 手动改写堆
- 京东架构师呕心整理:jvm与性能调优有哪些核心技术知识点
- 标准C语言学习总结14
- AI basketball referee, walking is special, ask harden care don't care
猜你喜欢
Two minutes recording can pass by second language!The volcano how to practice and become voice tone reproduction technology?
Programmer's Exclusive Romance - Use 3D Engine to Realize Fireworks in 5 Minutes
Blocking, non-blocking, multiplexing, synchronous, asynchronous, BIO, NIO, AIO all in one pot
Resolved IndentationError: unindent does not match any oute r indentation Level
阻塞、非阻塞、多路复用、同步、异步、BIO、NIO、AIO 一锅端
听声辨物,这是AI视觉该干的???|ECCV 2022
IDEA close/open reference prompt Usages
你没见过的《老友记》镜头,AI给补出来了|ECCV 2022
HAproxy:负载均衡
Here comes the question: Can I successfully apply for 8G memory on a machine with 4GB physical memory?
随机推荐
李开复花上千万投的缝纫机器人,团队出自大疆
金融业“限薪令”出台/ 软银出售过半阿里持仓/ DeepMind新实验室成立... 今日更多新鲜事在此...
腾讯欲成育碧最大股东/ 米哈游招NLP内容生成研究员/ AI发现四千余物种濒临灭绝...今日更多新鲜事在此...
ABP 6.0.0-rc.1的新特性
一甲子,正青春,CCF创建六十周年庆典在苏州举行
Nature:猪死亡1小时后,器官再次运转
微服务架构的核心关键点
【Untitled】
HAproxy:负载均衡
ACM longest non-descent subsequence problem
Apexsqlrecover cannot connect to database
在北极都可以穿短袖了,温度飙升至32.5℃
Batch大小不一定是2的n次幂!ML资深学者最新结论
MySQL查询性能优化七种武器之索引潜水
非科班AI小哥火了:他没有ML学位,却拿到DeepMind的offer
ABAP 报表中如何以二进制方式上传本地文件试读版
Blocking, non-blocking, multiplexing, synchronous, asynchronous, BIO, NIO, AIO all in one pot
曲鸟全栈UI自动化教学(八):框架代码讲解和进一步优化
WeChat Mini Program Payment and Refund Overall Process
基于STM32+铂电阻设计的测温仪