Text:该 widget 可让创建一个带格式的文本
字体样式解析如下:
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控件上时,行高
this.decoration, // 添加上划线,下划线,删除线
this.decorationColor, // 划线的颜色
this.decorationStyle, // 这个style可能控制画实线,虚线,两条线,点, 波浪线等
this.debugLabel,
String fontFamily, // 字体
String package,
})
具体代码
import 'package:flutter/material.dart';
class TextDemo extends StatefulWidget {
_TextDemo createState() => _TextDemo();
}
class _TextDemo extends State<TextDemo> {
@override
void initState() {}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
margin: EdgeInsets.only(top: 50),
child: Column(
children: [
Text("简单用法1"),
Text(
"简单用法2",
style: TextStyle(color: Colors.green, fontSize: 16),
),
Container(
alignment: Alignment.centerLeft,
margin: EdgeInsets.all(20), //设置四周外边距为20
padding: EdgeInsets.only(top: 10, left: 20), //设置上和左内边距
child: Text(
"简单用法3-设置字体",
style: TextStyle(
color: Colors.green,
fontSize: 16,
fontStyle: FontStyle.italic),
),
),
Text(
"简单用法4-添加下划线",
style: TextStyle(
color: Colors.green,
fontSize: 16,
decoration: TextDecoration.underline,
),
),
Container(
width: double.infinity, // 宽度上撑满
child: Text(
"简单用法5-右边对齐",
textAlign: TextAlign.right,
),
),
RichText(
text: TextSpan(
//TextSpan中的style 样式需要设置属性,不设置无法显示文字
style: DefaultTextStyle.of(context).style,
children: <InlineSpan>[
TextSpan(text: '哈哈', style: TextStyle(color: Colors.red)),
TextSpan(text: ','),
TextSpan(
text: '这是一个富文本', style: TextStyle(color: Colors.blue)),
]),
),
Text.rich(
TextSpan(children: [
TextSpan(text: "我", style: TextStyle(color: Colors.red)),
TextSpan(text: "也", style: TextStyle(color: Colors.grey)),
TextSpan(text: "是富文本", style: TextStyle(color: Colors.blue)),
]),
),
],
),
));
}
}
最终实现效果