Flutter里面的文本样式
image
const TextStyle({
this.inherit: true, // 为false的时候不显示
this.color, // 颜色
this.fontSize, // 字号
this.fontWeight, // 字重，加粗也用这个字段 FontWeight.w700
this.fontStyle, // FontStyle.normal FontStyle.italic斜体
this.letterSpacing, // 字符间距 就是单个字母或者汉字之间的间隔，可以是负数
this.wordSpacing, // 字间距 句字之间的间距
this.textBaseline, // 基线，两个值，字面意思是一个用来排字母的，一人用来排表意字的（类似中文）
this.height, // 当用来Text控件上时，行高（会乘以fontSize,所以不以设置过大）
this.decoration, // 添加上划线，下划线，删除线
this.decorationColor, // 划线的颜色
this.decorationStyle, // 这个style可能控制画实线，虚线，两条线，点, 波浪线等
this.debugLabel,
String fontFamily, // 字体
String package,
}) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
assert(inherit != null);
import 'package:flutter/material.dart';
/**
* TextStyle Demo页面
*/
class TextStylePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new TextStyleState();
}
}
class TextStyleState extends State<TextStylePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
// 去掉导航栏下面的阴影
elevation: 0.0,
title: new Text('TextStyle'),
),
body: new Container(
margin: EdgeInsets.all(10.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Text(
'inherit: 为 false 的时候不显示',
style: new TextStyle(
inherit: true,
),
),
new Text(
'color/fontSize: 字体颜色，字号等',
style: new TextStyle(
color: Color.fromARGB(255, 150, 150, 150),
fontSize: 22.0,
),
),
new Text(
'fontWeight: 字重',
style: new TextStyle(fontWeight: FontWeight.w700),
),
new Text(
'fontStyle: FontStyle.italic 斜体',
style: new TextStyle(
fontStyle: FontStyle.italic,
),
),
new Text(
'letterSpacing: 字符间距',
style: new TextStyle(
letterSpacing: 10.0,
// wordSpacing: 15.0
),
),
new Text(
'wordSpacing: 字或单词间距',
style: new TextStyle(
// letterSpacing: 10.0,
wordSpacing: 15.0),
),
new Text(
'textBaseline:这一行的值为TextBaseline.alphabetic',
style: new TextStyle(
textBaseline: TextBaseline.alphabetic),
),
new Text(
'textBaseline:这一行的值为TextBaseline.ideographic',
style: new TextStyle(
textBaseline: TextBaseline.ideographic),
),
new Text(
'height: 用在Text控件上的时候，会乘以fontSize做为行高,所以这个值不能设置过大',
style: new TextStyle(
height: 1.0,
)
),
new Text(
'decoration: TextDecoration.overline 上划线',
style: new TextStyle(
decoration: TextDecoration.overline,
decorationStyle: TextDecorationStyle.wavy
)
),
new Text(
'decoration: TextDecoration.lineThrough 删除线',
style: new TextStyle(
decoration: TextDecoration.lineThrough,
decorationStyle: TextDecorationStyle.dashed
)
),
new Text(
'decoration: TextDecoration.underline 下划线',
style: new TextStyle(
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dotted
)
),
],
),
));
}
}
关于学习
flutter的学习文章都整理在这个github仓库里
