一。 Text
flutter控件练习demo地址:github
1.1 Text简介
Text: 单一格式的文本 使用比较多的 , 相当于 android 中的TextView
1.2 基本属性
- data 要显示的文本,必填参数 String
- style 用于指定文本显示的样式如字体大小,颜色等,字体默认的大小是 14 ,默认样式会继承层级最为接近的 DefaultTextStyle 如果再加样式。有两种情况:
- TextStyle.inherit = true 相当于***继承*** 最为接近的DefaultTextStyle ,比如要让DefaultTextStyle的字体大小,颜色一样,直接再设置个粗体即可
- TextStyle.inherit = false 完全重写了样式
- strutStyle
- textAlign 对齐方式,
- TextAlign.left : 对齐容器左边缘的 Text
- TextAlign.right : 对齐容器右边缘的 Text
- TextAlign.center : 对齐容器中心的 Text
- TextAlign.justify (感觉很少用): 拉伸以结束的文本行以填充容器的宽度(暂时不知道怎么用)
- TextAlign.start (感觉很少用):对齐容器前缘的 Text。对于从左到右的文本([TextDirection.ltr]),这是左边缘,对于从右到左的文本([TextDirection.rtl]),这是右边缘
- TextAlign.end (感觉很少用):对齐容器尾部边缘的 Text。/对于从左到右的文本([TextDirection.ltr]),这是右边缘。对于从右到左的文本([TextDirection.rtl]),这是左边缘
- textDirection(感觉很少用) text 的流向
- softWrap 是否允许换行 false 表示 只显示一行,如果设置了 maxLines 此属性失效
- overflow 文本显示的截断方式
- textScaleFactor 文本的缩放比例
- maxLines text显示的最大行数
- semanticsLabel 暂时不知道什么用
1.3 demo
import 'package:flutter/material.dart';
class TextDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
color: Colors.red,
width: 200,
height: 200,
child: Text(
"1234561222222222222222222222222222333222ssssssssssssssssss",
textAlign: TextAlign.left,
// 对齐方式
// textDirection: TextDirection.ltr, // 文本流向
softWrap: false, // 是否允许换行 , 如果设置了 maxLines 此属性失效
overflow: TextOverflow.ellipsis,
// 文本的截断方式
// TextOverflow.ellipsis 以三个点结尾 ,
// TextOverflow.clip(默认的截断方式)强制截断,没有任何商量
// TextOverflow.fade 褪色的截断
textScaleFactor: 2,// 放大比例(估计一般用不到,一般直接设置 style 来设置 大小
maxLines:3, // 最大的行数
// semanticsLabel: "adfadsfasdf", (暂时不知道什么用)
));
}
}
复制代码
二 RichText 和 Text.rich
1.1 Text简介
RichText Text.rich: 可以做出多种样式的文本绚丽多彩, 相当于 android 中的SpannableString
2.1 说明
Text.rich 和 Text 源码都是通过 RichText 实现的
复制代码
2.2 demo图片
demo代码
class TextRichDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("TextRich"),
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text.rich(
TextSpan(
// 必须设置一个父TextStyle 否则 字体是白色
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.bold),
text: "Text.rich 实现: ",
children: <TextSpan>[
TextSpan(
text: '绚丽',
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.normal)),
TextSpan(
text: '文本',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blue,
)),
TextSpan(
text: '样式',
style: TextStyle(
fontStyle: FontStyle.italic,
color: Colors.black,
fontSize: 18,
decoration: TextDecoration.lineThrough,
fontWeight: FontWeight.normal)),
]),
style: TextStyle(height: 2),
),
RichText(
text: TextSpan(
// 必须设置一个父TextStyle 否则 字体是白色
style:
TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
text: "RichText 实现: ",
children: <TextSpan>[
TextSpan(
text: '绚丽',
style: TextStyle(
color: Colors.red, fontWeight: FontWeight.normal)),
TextSpan(
text: '文本',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.blue)),
TextSpan(
text: '样式',
style: TextStyle(
fontStyle: FontStyle.italic,
color: Colors.black,
fontSize: 18,
decoration: TextDecoration.lineThrough,
fontWeight: FontWeight.normal)),
],
))
],
),
));
}
}
复制代码
三。 TextStyle
Text 的 样式
3.1 主要属性
- inherit = true 默认样式会继承层级最为接近的 DefaultTextStyle,为true 表示继承,false 表示完全重写
- color 字体颜色,注意: 如果有特殊的foreground,此值必须是null
- fontSize 字体大小 默认的是 14
- fontWeight 字体的粗细程度 FontWeight.w100 -- FontWeight.w900 . 默认是FontWeight.w400,FontWeight.w700 属于正常加粗
- fontStyle FontStyle.normal正常 FontStyle.italic斜体
- letterSpacing 单个字母或者汉字的距离,默认是1.0,负数可以拉近距离
- wordSpacing 单词之间添加的空间间隔,负数可以拉近距离
- textBaseline 对齐text的水平线:
- TextBaseline.ideographic用来对齐表意文字的水平线
- TextBaseline.alphabetic 以标准的字母顺序为基线
- height 文本的高度 主要用于[TextSpan] 来设置不同的高度
- foreground text的前景色,与 color 不能同时设置
- background text的背景色
- shadows 将在文本下方绘制的[阴影]列表
- decoration 划线,
- TextDecoration.none 没有
- TextDecoration.underline 下划线
- TextDecoration.overline 上划线
- TextDecoration.lineThrough 中间的线(删除线)
- decorationColor decoration划线的颜色
- decorationStyle decoration划线的样式
- TextDecorationStyle.solid 实线
- TextDecorationStyle.double 画两条线
- TextDecorationStyle.dotted 点线(一个点一个点的)
- TextDecorationStyle.dashed 虚线(一个长方形一个长方形的线)
- TextDecorationStyle.wavy 正玄曲线
- debugLabel 只在调试的使用
3.2 图片
3.3 代码demo
class TextStyleDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
Paint paintBlue = Paint();
paintBlue.color = Colors.blue;
Paint paintRed = Paint();
paintRed.color = Colors.red;
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text("TextStyle"),centerTitle: true,),
body: Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"inherit=false时 默认的文字颜色是白色,相当于完全重新样式",
style: TextStyle(inherit: false, color: Colors.red),
),
Divider(),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
"fontWeight: ",
style: TextStyle(fontWeight: FontWeight.w700),
),
Text(
"FontWeight.w400(默认)",
style: TextStyle(fontWeight: FontWeight.w400),
),
Text(
"FontWeight.w700(正常加粗)",
style: TextStyle(fontWeight: FontWeight.w700),
),
],
),
Divider(),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
"fontStyle: ",
style: TextStyle(fontWeight: FontWeight.w700),
),
Text(
"FontStyle.normal(正常)",
style: TextStyle(fontStyle: FontStyle.normal),
),
Text(
"FontStyle.italic(斜体)",
style: TextStyle(fontStyle: FontStyle.italic),
),
],
),
Divider(),
Text(
"letterSpacing,每个字符的间距",
style: TextStyle(letterSpacing: 4),
),
Divider(),
Text(
"wordSpacing 单词 每个单词之间的距离(相当于给空格设置的距离)",
style: TextStyle(wordSpacing: 10),
),
Divider(),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
"textBaseline: ",
style: TextStyle(fontWeight: FontWeight.w700),
),
Text(
"TextBaseline.ideographic",
style: TextStyle(textBaseline: TextBaseline.ideographic),
),
Text(
" TextBaseline.alphabetic",
style: TextStyle(textBaseline: TextBaseline.alphabetic),
),
],
),
Divider(),
Text(
"foreground 相当于设置paint,来绘制文字",
style: TextStyle(foreground: paintBlue),
),
Divider(),
Text(
"background 文本的背景",
style: TextStyle(background: paintRed),
),
Divider(),
Text(
"shadows 文本的阴影",
style: TextStyle(shadows: [
BoxShadow(
color: Colors.grey, offset: Offset(-1, -1), blurRadius: 5)
]),
),
Divider(),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
"decoration: ",
style: TextStyle(fontWeight: FontWeight.w700),
),
Text(
"TextDecoration.overline(上划线)",
style: TextStyle(decoration: TextDecoration.overline),
),
Text(
"TextDecoration.none(没有划线)",
style: TextStyle(decoration: TextDecoration.none),
),
Text(
"TextDecoration.underline(下划线)",
style: TextStyle(decoration: TextDecoration.underline),
),
Text(
"TextDecoration.lineThrough(中划线,删除线)",
style: TextStyle(
decoration: TextDecoration.lineThrough,
textBaseline: TextBaseline.alphabetic),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
"decorationStyle: ",
style: TextStyle(fontWeight: FontWeight.w700),
),
Text(
"TextDecorationStyle.solid(实线)",
style: TextStyle(
decoration: TextDecoration.lineThrough,
decorationStyle: TextDecorationStyle.solid),
),
Text(
"TextDecorationStyle.double(两条线)",
style: TextStyle(
decoration: TextDecoration.lineThrough,
decorationStyle: TextDecorationStyle.double),
),
],
),
],
)),
);
}
}
复制代码