学习一个Widget的使用最好的办法就是直接看源码的注释,基本的用法里面都介绍清楚了。
Text有2个构造函数,属性仅仅有9个,非常简单的一个控件。
属性 | 说明 |
---|---|
textAlign | 对齐:left、start、right、end、center、justify |
textDirection | TextDirection.ltr:从左到右、TextDirection.rtl:从右到左 |
softWrap | 是否自动换行 |
overflow | 截取部分展示:clip:直接截取 fade:渐隐 ellipsis:省略号,省略的部分是以单词为单位,而不是字母,比如 hello worddfsa fdafafsasfs ,显示hello … |
textScaleFactor | 字体缩放 |
maxLines | 显示到最大行数 |
semanticsLabel | 谁知道这个有什么用啊 |
属性 | 说明 |
---|---|
inherit | 是否继承父组件的属性,默认true,这个属性极少需要设置为false,设置为false字体默认为白色、10pixels |
color | 字体颜色,如何设置可以看这:https://blog.csdn.net/mengks1987/article/details/84819431 |
fontSize | (逻辑)字体大小,默认14,是否适配不同屏幕?打个问号需要验证 |
fontWeight | 字体粗细 一般使用的属性:FontWeight normal(默认) 、FontWeight bold(粗体) |
fontStyle | 字体:normal和italic |
fontFamily | 设置字体,注意和 fontStyle的区别 |
letterSpacing | 字母间距,默认0,负数间距越小,正数 间距越大 |
wordSpacing | 单词 间距,默认0,负数间距越小,正数 间距越大,注意和letterSpacing的区别,比如hello,h、e、l、l、o各是一个字母,hello是一个单词 |
textBaseline | 字体基线,基线的概念可以看这:https://blog.csdn.net/hanyingjie327/article/details/22799811 |
height | 会乘以fontSize做为行高 |
locale | 设置区域,默认系统的区域 |
foreground | 前置,值是Paint,设置了foreground,color必须为null |
background | 背景,注意是Paint |
shadows | 阴影 |
decoration | 文字划线:下划线、上划线、中划线 |
decorationColor | 划线颜色 |
decorationStyle | 划线样式:虚线、双线等 |
作用就是一句话显示为不同的样式
Text.rich( TextSpan( text: 'Hello', // children: <TextSpan>[ TextSpan( text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)), TextSpan( text: 'world', style: TextStyle(fontWeight: FontWeight.bold)), ], ), )
import 'package:flutter/material.dart'; class TextDemo extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build var paint = new Paint(); paint.color = Color(0xFF00FF00); var shadowList = [ new Shadow(color: Color(0xFFFF0000), offset: Offset(3, 3), blurRadius: 3) ]; return Column( children: <Widget>[ Row( children: <Widget>[ Text('inherit=false:'), Text( 'inherit=false', style: TextStyle(inherit: false), ) ], ), Row( children: <Widget>[ Text('字体颜色:'), Text( '字体颜色是红色', style: TextStyle(color: Color(0xFFFF0000)), ) ], ), Row( children: <Widget>[ Text('字体大小:'), Text( '字体大小默认', ), Text( '字体大小30', style: TextStyle(fontSize: 30), ) ], ), Row( children: <Widget>[ Text('字体粗细:'), Text( '默认', ), Text( '粗体', style: TextStyle(fontWeight: FontWeight.bold), ) ], ), Row( children: <Widget>[ Text('字体:'), Text( '字体-默认', ), Text( '字体-italic', style: TextStyle(fontStyle: FontStyle.italic), ) ], ), Row( children: <Widget>[ Text('字母间距:'), Text('字母间距默认'), Text( '字母间距:-5,absccc', style: TextStyle(letterSpacing: -5), ), Text( '字母间距:5,absccc', style: TextStyle(letterSpacing: 5), ) ], ), Row( children: <Widget>[ Text('单词间距:'), Text('单词间距默认'), Text( '单词间距:-5,hello word', style: TextStyle(wordSpacing: -5), ), Text( '单词间距:5,hello word', style: TextStyle(wordSpacing: 5), ) ], ), Row( children: <Widget>[ Text('foreground:'), Text( 'Paint 设置颜色为绿色', style: TextStyle(foreground: paint), ) ], ), Row( children: <Widget>[ Text('background:'), Text( '背景设置为绿色', style: TextStyle(background: paint), ) ], ), Row( children: <Widget>[ Text('阴影:'), Text( '背景阴影', style: TextStyle( shadows: shadowList, ), ) ], ), Row( children: <Widget>[ Text('文字划线:'), Text( '下划线', style: TextStyle( decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.dashed), ), Text( '上划线', style: TextStyle( decoration: TextDecoration.overline, decorationStyle: TextDecorationStyle.dotted), ), Text( '中划线', style: TextStyle( decoration: TextDecoration.lineThrough, decorationColor: Color(0xFFFF0000), decorationStyle: TextDecorationStyle.double), ), Text( '中划线', style: TextStyle( decoration: TextDecoration.lineThrough, decorationColor: Color(0xFFFF0000), decorationStyle: TextDecorationStyle.solid), ) ], ), Row( children: <Widget>[ Text('对齐方式:'), Container( width: 300, height: 50, color: Color(0xFFFF0000), child: Text( '左对齐', textAlign: TextAlign.left, ), ), ], ), Row( children: <Widget>[ Text('对齐方式:'), Container( width: 300, height: 50, color: Color(0xFFFF0000), child: Text( '右对齐', textAlign: TextAlign.right, ), ), ], ), Row( children: <Widget>[ Text('对齐方式:'), Container( width: 300, height: 50, color: Color(0xFFFF0000), child: Text( '中间对齐', textAlign: TextAlign.center, ), ), ], ), Row( children: <Widget>[ Text('对齐方式:'), Container( width: 300, height: 50, color: Color(0xFFFF0000), child: Text( 'hello word \n dfsafdafafsasfs', textAlign: TextAlign.justify, ), ), ], ), Row( children: <Widget>[ Text('方向:'), Container( width: 300, height: 50, color: Color(0xFFFF0000), child: Text( 'hello word \n dfsafdafafsasfs', textDirection: TextDirection.rtl, ), ), ], ), Row( children: <Widget>[ Text('overflow:fade'), Container( width: 100, height: 50, color: Color(0xFF00FF00), child: Text( 'hello worddfsafdafafsasfs', softWrap: false, overflow: TextOverflow.fade, ), ), ], ), Row( children: <Widget>[ Text('overflow:ellipsis'), Container( width: 100, height: 50, color: Color(0xFF00FF00), child: Text( 'hello word dfsa fdaf afs asfs', softWrap: false, overflow: TextOverflow.ellipsis, ), ), ], ), Row( children: <Widget>[ Text('semanticsLabel:'), Container( width: 400, height: 50, color: Color(0xFF00FF00), child: Text(r'$$ Double dollars $$', semanticsLabel: 'Double dollars'), ), ], ), Row( children: <Widget>[ Text.rich( TextSpan( text: 'Hello', // children: <TextSpan>[ TextSpan( text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)), TextSpan( text: 'world', style: TextStyle(fontWeight: FontWeight.bold)), ], ), ) ], ) ], ); } }