1 Text
文本组件Text负责显示文本和定义显示样式。
常用属性
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
data | String | 数据为要显示的文本 | |
maxLines | int | 0 | 文本显示的最大行数 |
style | TextStyle | null | 文本样式,可定义文本的字体大小、颜色、粗细等 |
textAlign | TextAlign | TextAlign.center | 文本水平方向对齐方式,取值右center、end、justify、left、right、start、values |
textDirection | TextDirection | TextDirection.ltr | 有些文本书写方向从左到右,如英语、中文,有些则是从右到左,比如乌尔都语。从左到右使用TextDirection.ltr,从右到左使用TextDirection.rtl |
textScaleFactor | double | 1.0 | 字体缩放系数,比如设置为1.5,那么字体会放大1.5倍 |
textSpan | TextSpan | null | 文本块,TextSpan里可以包含文本内容及样式 |
2 RichText
富文本组件RichText使用多个不同风格的widget显示文本,要显示的文本使用TextSpan对象树来描述,每个对象都有一个用于该子树的关联样式。文本可能多行,也可能显示在同一行,取决于布局约束。
常用属性:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
text | TextSpan | - | 要显示的的文本 |
textAlign | TextAlign | TextAlign.start | 文本水平方向对齐方式,取值右center、end、justify、left、right、start、values |
textDirection | TextDirection | TextDirection.ltr | 有些文本书写方向从左到右,如英语、中文,有些则是从右到左,比如乌尔都语。从左到右使用TextDirection.ltr,从右到左使用TextDirection.rtl |
softWrap | bool | true | 是否自动换行 |
overflow | TextOverflow | TextOverflow.clip | 内容超出文本范围处理方式,默认截断处理 |
textScaleFactor | double | 1.0 | 文本缩放比例,默认100%比例显示 |
maxLines | int | - | 最大显示行数 |
3 Text示例
添加库依赖:
url_launcher: ^5.0.2
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
void main() => runApp(MyApp());
//Text RickText
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Text示例'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'海浪不停 整夜吟唱 孤独陪着我守望 忐忑徘徊 执着等待 我要穿越过这海 灯塔的光 就在彼岸',
maxLines: 1,
overflow: TextOverflow.ellipsis, //3小点
softWrap: true, //自动换行
style: TextStyle(
fontSize: 30.0,
decoration: TextDecoration.lineThrough,
decorationStyle: TextDecorationStyle.wavy),
),
SizedBox(
height: 10.0,
),
RichText(
text: TextSpan(
text: '海浪不停 整夜吟唱 孤独陪着我守望 , ',
style: TextStyle(color: Color(0xffff0000), fontSize: 20.0),
children: <TextSpan>[
TextSpan(
text: '忐忑徘徊 执着等待 我要穿越过这海',
),
TextSpan(
text: '灯塔的光 就在彼岸', //
style: TextStyle(color: Color(0xff0000ff)),
recognizer: TapGestureRecognizer()
..onTap = () async {
String url = 'https://www.baidu.com/';
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'error: $url';
}
}),
],
),
),
],
),
),
),
);
}
}
显示效果: