作为Flutter最基本的文本组件,也是最通用的组件,在最开始学习就把建立一个Flutter程序的结构熟悉一下
下面一个简单的demo,我们大致把这个Flutter程序分为3个区块
- 引入
flutter/material.dart视觉组件 - 建立一个入口函数
mian()通过runApp()把我们的主体内容传入到这个函数 - 在
Flutter中,万物皆组件.建立刚才第二步传入的这个自定义主件
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '这里是beline的app',
home: Scaffold(
appBar: AppBar(
title: Text('这里是title')
),
body: Center(
child: Text('这里是正文'),
)
),
);
}
}
在自定义组件中,通过build方法来构建组件内容
在上面的demo中,这个组件主要包含两个部分
- title 此处的title并不是app顶部的文字部分
- home 页面显示的内容其中Scaffold函数中的
appBar方法传入的title用于app顶部显示内容,而body则作为app正文部分展示,此处Center做为一个布局单位,在以后会经常用,child则是子元素的意思.
我们发现凡是需要显示文字的地方,都可以使用Text()组件显示
image.png
textAlign 水平对齐方式
在Text组件中,都可以使用textAlign属性进行文字对齐.使用上和CSS类似,但是需要注意的是如果直接写textAlign:center编译器是会报错的.正确写法应该是textAlign: TextAlign.center
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '这里是beline的app',
home: Scaffold(
appBar: AppBar(
title: Text('这里是title')
),
body: Center(
child: Text(
'经过对windows和mac系统安装Flutter环境对比发现,mac系统安装Flutter需要对mac系统环境变量的配置方法'
',以及安卓sdk的使用更加熟悉,否则会踩很多坑',
textAlign: TextAlign.center,
),
)
),
);
}
}
APP界面:
image.png
举一反三:TextAlign的属性
- left 左对齐
- center 居中
- right 右对齐
- start 从开始的位置对齐(类似左对齐)
- end 结尾处对齐(类似右对齐)
maxLines 最大显示行数 以及 overflow 溢出处理
在实际项目中,在列表页有时候需要只显示1行或者两行的文字那么,我们可以引入maxLines属性,后面跟的数字单位为行,例如1就是只显示一行的意思
child: Text(
'经过对windows和mac系统安装Flutter环境对比发现,mac系统安装Flutter需要对mac系统环境变量的配置方法以及安卓sdk的使用更加熟悉,否则会踩很多坑',
textAlign: TextAlign.center,
maxLines: 1,
),
但是我们发现在app中,文字确实只显示了一行,但是很生硬的切除了.这里我们就引入了另外一个是属性:overflow
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '这里是beline的app',
home: Scaffold(
appBar: AppBar(
title: Text('这里是title')
),
body: Center(
child: Text(
'经过对windows和mac系统安装Flutter环境对比发现,mac系统安装Flutter需要对mac系统环境变量的配置方法'
',以及安卓sdk的使用更加熟悉,否则会踩很多坑',
textAlign: TextAlign.center,
maxLines: 1,
overflow: TextOverflow.clip,
),
)
),
);
}
}
上面demo中,我们使用了overflow: TextOverflow.clip,对溢出的文本进行处理.那么属性都代表的意思:
- TextOverflow.clip 生硬的切掉多余部分
- TextOverflow.ellipsis 在文本的最后加'...'
-
TextOverflow.fade 文字从上到下渐变消失
TextOverflow.fade效果:
image.png
style属性
在text组件中,style属性最为繁琐,因为对文字的大小,颜色之类的设置都是在这里完成的,下面通过一个demo,来简单的实现一些对文字的处理
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '这里是beline的app',
home: Scaffold(
appBar: AppBar(
title: Text('这里是title')
),
body: Center(
child: Text(
'经过对windows和mac系统安装Flutter环境对比发现,mac系统安装Flutter需要对mac系统环境变量的配置方法'
',以及安卓sdk的使用更加熟悉,否则会踩很多坑',
textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.fade,
style: TextStyle(
fontSize: 25.0, //- 设置文字的大小
color: Color.fromARGB(255, 255, 123, 122), //- 设置字体颜色
decoration: TextDecoration.underline, //- 文字下面加下划线
decorationStyle: TextDecorationStyle.solid, //- 实线
)
),
)
),
);
}
}
app展示
image.png