Flutter -- 基础组件文本组件 Text & TextStyle & TextSpan
Posted Kevin-Dev
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter -- 基础组件文本组件 Text & TextStyle & TextSpan相关的知识,希望对你有一定的参考价值。
文章目录
本篇文章会介绍 Flutter 里常用的 UI 控件 – 文本。
1. Text
Text 用于显示简单样式文本,它包含一些控制文本显示样式的一些属性。
1.1 属性
const Text(
this.data,
Key key,
this.style, // 字体样式
this.strutStyle,
this.textAlign, // 文字对齐
this.textDirection, // 文字方向
this.locale,
this.softWrap, // 自动换行,默认是 true,自动换行
this.overflow, // 溢出样式
this.textScaleFactor, // 字体倍数,字体大小 * textScaleFactor
this.maxLines, // 最大行数
this.semanticsLabel,
this.textWidthBasis,
)
1.2 实例代码
import 'package:flutter/material.dart';
void main()
runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('文本及样式'),
),
body:Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text("1.Text",
textScaleFactor: 1.5,
),
const Text("hello,I'm Kevin"),
Text("少壮不努力,老大徒伤悲。" * 3,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
)
)
);
1.3 效果图
2. TextStyle
TextStyle 用于指定文本显示的样式如颜色、字体、粗细、背景等。
2.1 属性
const TextStyle(
this.inherit = true, // 为false 的时候不显示
this.color, // 颜色
this.backgroundColor,
this.fontSize, // 字号
this.fontWeight, // 字重,加粗也用这个字段 FontWeight.w700
this.fontStyle, // FontStyle.normal FontStyle.italic斜体
this.letterSpacing, // 字符间距 就是单个字母或者汉字之间的间隔,可以是负数
this.wordSpacing, // 段落间距,以空格为准
this.textBaseline, // 基线,两个值,字面意思是一个用来排字母的,一人用来排表意字的(类似中文)
this.height, // 当用来Text控件上时,行高(会乘以fontSize,所以不以设置过大)
this.locale,
this.foreground,
this.background,
this.shadows,
this.fontFeatures,
this.decoration, // 添加上划线,下划线,删除线
this.decorationColor, // 划线的颜色
this.decorationStyle, // 这个style可能控制画实线,虚线,两条线,点, 波浪线等
this.decorationThickness,
this.debugLabel,
String fontFamily, // 字体
List<String> fontFamilyFallback,
String package,
)
2.2 实例代码
import 'package:flutter/material.dart';
void main()
runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('文本及样式'),
),
body:Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text("2.TextStyle",
textScaleFactor: 1.5,
),
Text("一份耕耘,一份收获。",
style: TextStyle(
color: Colors.blue,
fontSize: 18.0,
height: 1.2,
fontFamily: "Courier",
background: Paint()..color=Colors.yellow,
decoration:TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed
),
),
],
)
)
);
2.3 效果图
3. TextSpan
Text 的所有文本内容只能按同一种样式,如果我们需要对一个 Text 内容的不同部分按照不同的样式显示,这时就可以使用 TextSpan,它代表文本的一个“片段”。
3.1 属性
const TextSpan(
TextStyle style, //该文本片段的样式
Sting text, //该文本片段的内容
List<TextSpan> children, // 是一个TextSpan的数组,也就是TextSpan可以包括其他TextSpan
GestureRecognizer recognizer, // 用于对该文本片段上用于手势进行识别处理。
);
3.2 实例代码
import 'package:flutter/material.dart';
void main()
runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('文本及样式'),
),
body:Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text("3.TextSpan",
textScaleFactor: 1.5,
),
const Text.rich(TextSpan(
children: [
TextSpan(
text: "我的 CSDN 博客: "
),
TextSpan(
text: "https://blog.csdn.net/duoduo_11011",
style: TextStyle(
color: Colors.blue
),
),
]
)),
],
)
)
);
3.3 效果图
参考文献
以上是关于Flutter -- 基础组件文本组件 Text & TextStyle & TextSpan的主要内容,如果未能解决你的问题,请参考以下文章