Flutter学习笔记(11)--文本组件、图标及按钮组件

如需转载,请注明出处:Flutter学习笔记(10)--容器组件、图片组件

文本组件

文本组件(text)负责显示文本和定义显示样式,下表为text常见属性

Text组件属性及描述 属性名   类型   默认值   说明  
data   String       要显示的文本  
maxLines   int   0   文本要显示的最大行数  
style   TextStyle   null   文本样式,可定义文本的字体大小、颜色、粗细等  
textAlign   TextAlign   TextAlign.center   文本水平方向的对齐方式,取值有center、end、justify、left、right、start、values  
textDirection   TextDirection   TextDirection.ltr   文本的书写方向,如从左到右、从右到左  
textScaleFactor   double   1.0   字体的缩放系数,比如,如果此属性设置的值为1.5,那么字体会被放大到150%,也就是说比原来大了50%  
textSpan   TextSpan   null   文本块,TextSpan里可以包含文本内容及样式  

 

 

 

 

 

 

 

 

老样子,按照惯例附上Demo,创建多个文本组件来展示不同的文本样式,比如不同的颜色,不同的自号,不同的线形等。

import 'package:flutter/material.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget{ @override Widget build(BuildContext context) { return new MaterialApp( title: '文本组件Demo', home: new Scaffold( appBar: new AppBar( title: Text('文本组件Demo'), ), body: new Column( children: <Widget>[ new Text( '第一个文本Demo', style: new TextStyle( color: Colors.amberAccent, fontSize: 20, ), ), new Text( '第二个文本Demo', style: new TextStyle( color: Colors.deepOrange, fontSize: 20, ), textScaleFactor: 1.5,//放大50% ), new Text( '第三个文本Demo(瞎写的瞎写的瞎写的瞎写的瞎写的瞎写的瞎写的瞎写的瞎写的瞎写的瞎写的瞎写的瞎写的瞎写的瞎写的瞎写的瞎写的)', style: new TextStyle( color: Colors.blue, fontSize: 20, ), textAlign: TextAlign.end,//右对齐 ), new Text( '''第四个文本Demo 换到第二行,看看能不能显示的出来呢''', style: new TextStyle( fontSize: 20, color: Colors.green, ), maxLines: 2,//最大显示2行 ), new Text( '第五个Demo,设置水平方向文案超出屏幕后,显示...(瞎写的字瞎写的字瞎写的字瞎写的字瞎写的字瞎写的字瞎写的字瞎写的字)', style: new TextStyle( fontSize: 20, color: Colors.black, ), overflow: TextOverflow.ellipsis,//水平方向超出屏幕显示... ) ], ),//垂直方向排列 ), ); } }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyyjxx.html