脚本宝典收集整理的这篇文章主要介绍了Flutter组件学习(一)—— Text组件,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
序言
之前说会给大家一一讲解 Flutter 中的组件,今天咱们就从 Text
组件开始,无图言X,先上图:
Text组件的API
我们先来看一下 Text
组件的构造方法
class Text extends statelessWidget {
const Text(this.data, {
Key key,
this.style,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.SEManticsLabel,
}) : assert(data != null),
textSpan = null,
suPEr(key: key);
const Text.rich(this.textSpan, {
Key key,
this.style,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
}): assert(textSpan != null),
data = null,
super(key: key);
}
构造方法有两个,一个是默认的 Text
样式,一个是现实丰富 Text.rich
样式,这样解释大家应该能猜得到就和 AndROId
中的 SpannableString
一样,下面来看一下 Text
组件的一些 API
:
API名称
功能
textAlign
文本对齐方式(center居中,left左对齐,right右对齐,justfy两端对齐)
textDirection
文本方向(ltr从左至右,rtl从右至左)
Software
是否自动换行(true自动换行,false单行显示,超出屏幕部分默认截断处理)
overflow
文字超出屏幕之后的处理方式(clip裁剪,fade渐隐,ellipsis省略号)
textScaleFactor
字体显示倍率
maxLines
文字显示最大行数
style
字体的样式设置
下面是 TextStyle
的 API
:
API名称
功能
decoration
文字装饰线(none没有线,linethrough删除线,overline上划线,underline下划线)
decorationColor
文字装饰线颜色
decorationStyle
文字装饰线风格([dashed,dotted]虚线,double两根线,solid一根实线,wavy波浪线)
wordspacing
单词间隙(如果是负值,会让单词变得更紧凑)
letterSpacing
字母间隙(如果是负值,会让字母变得更紧凑)
fontStyle
文字样式(ITalic斜体,normal正常体)
fontSize
文字大小
color
文字颜色
fontWeight
字体粗细(bold粗体,normal正常体)
还有一点需要注意的是,在 Flutter
中,并不是每个 Widget
都有点击事件,比如 Text
就没有,这时候你需要用一个 Gesturedetector
组件包住 Text
组件,然后实现它里面的 onTap()
事件,详细看下面代码:
class _TextViewWidget extends State<TextViewWidget> {
@override
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
Text('什么也不设置'),
Padding(
padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
child: Text(
'设置换行设置换行设置换行设置换行设置换行设置换行设置换行设置换行设置换行设置换行设置换行',
//是否自动换行 false文字不考虑容器大小,单行显示,超出屏幕部分将默认截断处理
softWrap: true,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
child: Text(
'设置超出屏幕之后的显示规则设置超出屏幕之后的显示规则设置超出屏幕之后的显示规则设置超出屏幕之后的显示规则',
//文字超出屏幕之后的处理方式 TextOverflow.clip剪裁 TextOverflow.fade 渐隐 TextOverflow.ellipsis省略号
overflow: TextOverflow.ellipsis,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
child: Text(
'设置最大显示行数设置最大显示行数设置最大显示行数设置最大显示行数设置最大显示行数设置最大显示行数设置最大显示行数',
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
child: Text(
'文本方向 sasasasasasasasasasasasasasasasasasasasasasa bdbdbdbdbdbdbdbdbdbdbdb',
//TextDirection.ltr从左至右,TextDirection.rtl从右至左
textDirection: TextDirection.rtl,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
child: Text(
'文本对齐方式 sasasasasasasasasasasasasasasasasasasasasasa bdbdbdbdbdbdbdbdbdbdbdb',
//TextAlign.left左对齐,TextAlign.right右对齐,TextAlign.center居中对齐,TextAlign.justfy两端对齐
textAlign: TextAlign.center,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
child: Text(
'设置颜色和大小',
style: TextStyle(
color: const Color(0xfff2c2b2),
fontSize: 17,
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
child: Text(
'设置粗细和斜体',
style: TextStyle(
//字体粗细,粗体和正常
fontWeight: FontWeight.bold,
//文字样式,斜体和正常
fontStyle: FontStyle.italic,
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
child: Text(
'设置文字装饰',
style: TextStyle(
//none无文字装饰,lineThrough删除线,overline文字上面显示线,underline文字下面显示线
decoration: TextDecoration.underline,
decorationColor: Colors.red,
decorationStyle: TextDecorationStyle.wavy
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
child: Text(
'单词间隙 hello world i am jack',
style: TextStyle(
wordSpacing: 10.0,
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
child: Text(
'字母间隙 hello world',
style: TextStyle(
letterSpacing: 10.0,
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
child: GestureDetector(
onTap: () {
print("点击了按钮");
},
child: Text(
'设置文字点击事件',
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
),
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
child: Text.rich(
new TextSpan(
text: 'Text.rich',
style: new TextStyle(
color: Colors.yellow,
fontSize: 13,
decoration: TextDecoration.none),
children: <TextSpan>[
new TextSpan(
text: '拼接1',
style: new TextStyle(
color: Colors.blue,
fontSize: 14,
decoration: TextDecoration.none)),
new TextSpan(
text: '拼接2',
style: new TextStyle(
color: Colors.black,
fontSize: 15,
decoration: TextDecoration.none)),
new TextSpan(
text: '拼接3',
style: new TextStyle(
color: Colors.red,
fontSize: 16,
decoration: TextDecoration.none)),
new TextSpan(
text: '拼接4',
style: new TextStyle(
color: Colors.grey,
fontSize: 17,
decoration: TextDecoration.none)),
]),
),
)
],
);
}
}
代码已上传至Github
公众号
欢迎关注我的个人公众号【IT先森养成记】,专注大前端技术分享,包含Android,Java,Kotlin,Flutter,HTML,CSS,JS等技术;在这里你能得到的不止是技术上的提升,还有一些学习经验以及志同道合的朋友,赶快加入我们,一起学习,一起进化吧!!!
以上是脚本宝典为你收集整理的Flutter组件学习(一)—— Text组件全部内容,希望文章能够帮你解决Flutter组件学习(一)—— Text组件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。