Flutter 基础控件 Text Widget
1. 创建TextExample继承StatefulWidget
class TextExample extends StatefulWidget {
@override
State<StatefulWidget> createState() {
throw TextExampleState();
}
}
2. 创建TextExampleState继承TextExampleState
class TextExampleState extends State<TextExample> {
@override
Widget build(BuildContext context) {
return text(context);
}
}
3. 创建Widget组建
Widget text1(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Text"),
),
body: Container(
child: Column(
children: <Widget>[
Text("Text最简单用用法"), // 添加Text控件
],
),
),
);
}
Text Widget 用法
Text("Text最简单用用法"),
- textAlign 文字对齐方式
- style 详细的字体样式配置,如加粗,字体大小,颜色和下划线等
Text(
"文字",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
decoration: TextDecoration.none,
),
),
- maxLines 行数
- overflow 超过范围后,结尾显示处理方式,默认为直接截断,也可以设置为省略号
- decoration: TextDecoration.underline 字体带有下划线
Text(
"文字" * 60,
textAlign: TextAlign.right,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style:
TextStyle(fontSize: 25, decoration: TextDecoration.underline),
),
- textScaleFactor 用来配置文本相对于当前字体大小的缩放因子,也就是缩放倍数,小于1表示缩小,大于1表示放大。
- softwrap 是否自动换行 false文字不考虑容器大小,单行显示,超出屏幕部分将默认截断处理
Text(
"文字,文字",
textAlign: TextAlign.left,
textScaleFactor: 1.6,
softWrap: true,
style: TextStyle(
fontSize: 20, color: Colors.black, fontWeight: FontWeight.bold),
),
Text.rich(
TextSpan(
text: "textSpan",
style: TextStyle(
color: Colors.orange,
fontSize: 30,
decoration: TextDecoration.lineThrough),
children: <TextSpan>[
new TextSpan(
text: "连接A", style: new TextStyle(color: Colors.teal)),
new TextSpan(
text: "连接B",
style: new TextStyle(color: Colors.tealAccent)),
new TextSpan(
text: "连接C有点击事件",
style: new TextStyle(color: Colors.deepOrangeAccent),
recognizer: new TapGestureRecognizer()
..onTap = () {
print("Flutter点击事件提示");
}),
]),
),
- RichText 通常情况下Text组件可以完成绝大多数需求,它可以显示不同大小的文字、字体、颜色等,如果想在一句话或者一段文字里面显示不同样式的文字,Text组件无法满足我们的需求,这个时候需要使用RichText
RichText(
text: TextSpan(
text: 'Hello ',
style: DefaultTextStyle.of(context).style,
children: <TextSpan>[
TextSpan(
text: 'bold',
style: TextStyle(
fontWeight: FontWeight.bold,
decoration: TextDecoration.none)),
TextSpan(
text: ' world!',
style: TextStyle(
fontWeight: FontWeight.bold,
decoration: TextDecoration.none)),
],
),
),

image.png

image.png
完整代码
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class TextExample extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return TextExampleState();
}
}
class TextExampleState extends State<TextExample> {
@override
Widget build(BuildContext context) {
return text1(context);
}
}
Widget text1(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Text"),
),
body: Container(
child: Column(
children: <Widget>[
Text("Text最简单用用法"),
Text(
"文字",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
decoration: TextDecoration.none,
),
),
Text(
"文字" * 60,
textAlign: TextAlign.right,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style:
TextStyle(fontSize: 25, decoration: TextDecoration.underline),
),
Text(
"文字,文字" * 60,
textAlign: TextAlign.left,
textScaleFactor: 1.6,
softWrap: false,
style: TextStyle(
fontSize: 20, color: Colors.black, fontWeight: FontWeight.bold),
),
Text.rich(
TextSpan(
text: "textSpan",
style: TextStyle(
color: Colors.orange,
fontSize: 30,
decoration: TextDecoration.lineThrough),
children: <TextSpan>[
new TextSpan(
text: "连接A", style: new TextStyle(color: Colors.teal)),
new TextSpan(
text: "连接B",
style: new TextStyle(color: Colors.tealAccent)),
new TextSpan(
text: "连接C有点击事件",
style: new TextStyle(color: Colors.deepOrangeAccent),
recognizer: new TapGestureRecognizer()
..onTap = () {
print("Flutter点击事件提示");
}),
]),
),
RichText(
text: TextSpan(
text: 'Hello ',
style: DefaultTextStyle.of(context).style,
children: <TextSpan>[
TextSpan(
text: 'bold',
style: TextStyle(
fontWeight: FontWeight.bold,
decoration: TextDecoration.none)),
TextSpan(
text: ' world!',
style: TextStyle(
fontWeight: FontWeight.bold,
decoration: TextDecoration.none)),
],
),
),
],
),
),
);
}
网友评论