Flutter 浅析之 Text Widget
程序员文章站
2022-05-30 09:42:03
...
技术无止境,只怕不学习啊,Flutter 我们开始吧
Flutter 之路从文本开始 Text
Text文本的剧中
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: "Text WidGet", // 标题
home: Scaffold(
body: Center(
child: Text(
"没事测试一下看看,准备测试了,看看数据是什么结构,是否换行了,拐外了",
),
),
),
);
}
}
TextAlign文本的对齐方式
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: "Text WidGet", // 标题
home: Scaffold(
body: Center(
child: Text(
"没事测试一下看看,准备测试了,看看数据是什么结构,是否换行了,拐外了",
textAlign: TextAlign.right ,// right 右对齐, 左对齐 left, 居中 center, 开始的地方 start, 结尾的地方 end
),
),
),
);
}
}
maxLines 行数
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: "Text WidGet", // 标题
home: Scaffold(
body: Center(
child: Text(
"没事测试一下看看,准备测试了,看看数据是什么结构,是否换行了,拐外了",
textAlign: TextAlign.right,// right 右对齐, 左对齐 left, 居中 center, 开始的地方 start, 结尾的地方 end
maxLines: 1, // 行数
),
),
),
);
}
}
TextOverflow
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: "Text WidGet", // 标题
home: Scaffold(
body: Center(
child: Text(
"没事测试一下看看,准备测试了,看看数据是什么结构,是否换行了,拐外了",
textAlign: TextAlign.right,// right 右对齐, 左对齐 left, 居中 center, 开始的地方 start, 结尾的地方 end
maxLines: 1, // 行数
overflow: TextOverflow.ellipsis, // 渐变fade(从上至下) ellipsis后面显示...
),
),
),
);
}
}
style 字体样式
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: "Text WidGet", // 标题
home: Scaffold(
body: Center(
child: Text(
"没事测试一下看看,准备测试了,看看数据是什么结构,是否换行了,拐外了",
textAlign: TextAlign.right,// right 右对齐, 左对齐 left, 居中 center, 开始的地方 start, 结尾的地方 end
maxLines: 1, // 行数
overflow: TextOverflow.ellipsis, // 渐变fade(从上至下) ellipsis后面显示...
style: TextStyle( // 字体样式
fontSize: 25.0, // 字体大小
color: Color.fromARGB(255, 255, 125, 125), // 字体颜色
decoration: TextDecoration.underline, // 下划线
decorationStyle: TextDecorationStyle.dashed // 下划线样式 solid 实线 , dashed 虚线
),
),
),
),
);
}
}
上面都是比较实用的基础属性,其它的可以自行查询API Text就到这里了。