如需转载,请注明出处: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,//水平方向超出屏幕显示... ) ], ),//垂直方向排列 ), ); } }