「这是我参与11月更文应战的第5天,活动概况检查:2021终究一次更文应战」
Text
默许显现
在咱们进行日常开发作业中,Text
能够说是咱们运用最多的部件了,那么咱们来研究一下Text
的相关运用;
首先,咱们来看一下一段文本在Text
上的默许显现作用:
Text('Flutter是谷歌的移动UI结构,能够快速在iOS和Android上构建高质量的原生用户界面。 Flutter能够与现有的代码一同作业。在全世界,Flutter正在被越来越多的开发者和安排运用,并且Flutter是完全免费、开源的。');
其显现作用如下:
居中显现
textAlign: TextAlign.center,
显现作用如下:
TextStyle
创建一个TextStyle
给Text
的style
属性赋值,用来改动字体大小及粗细;
final TextStyle _textStyle = const TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w800,
);
@override
Widget build(BuildContext context) {
return Text(
'Flutter是谷歌的移动UI结构,能够快速在iOS和Android上构建高质量的原生用户界面。 Flutter能够与现有的代码一同作业。在全世界,Flutter正在被越来越多的开发者和安排运用,并且Flutter是完全免费、开源的。',
textAlign: TextAlign.center,
style: _textStyle,
);
}
显现作用如下:
maxLines
显现最大行数:
return Text(
'Flutter是谷歌的移动UI结构,能够快速在iOS和Android上构建高质量的原生用户界面。 Flutter能够与现有的代码一同作业。在全世界,Flutter正在被越来越多的开发者和安排运用,并且Flutter是完全免费、开源的。',
textAlign: TextAlign.center,
style: _textStyle,
maxLines: 2,
);
代码运转作用如下:
overflow
�多余行数咱们以...
来显现:
显现作用:
文本拼接
显现文字很简略,可是在开发进程中常常是需求拼接文本的,那么又该如何处理呢?
咱们先界说几个文本字符串:
final String _title = '《法外狂徒张三的自我修养》';
final String _lector = '讲师:';
final String _name = '罗翔';
那么,咱们如何将这三个字符串进行拼接呢?在Flutter
中能够运用$
来进行操作:
Text(
'$_title -- $_lector$_name',
textAlign: TextAlign.center,
style: _textStyle,
);
咱们来看一下显现作用:
RichText
简略的Text
显现文字很简略,可是这还不足以满意咱们的开发需求,咱们在开发进程中常常会有需求显现富文本的情况,那么又该如何处理呢?
这个时分就需求运用RichText
部件了;再运用RichText
时结合TextSpan
一同运用:
终究显现作用如下:
Container
Container
这个部件在咱们开发进程中会常常用到;
咱们先来给Container
添加一个颜色:
Container(
color: Colors.orange,
);
咱们执行代码之后发现,这个Container
是整个屏幕大小:
这是为什么呢?这是由于Container
默许大小是由其父部件
决议的,会铺满父部件
;
咱们在Container
里边运用Row
部件布局,再添加一个Container
:
运转发现,赤色的Container
是无法显现的,橙色的Container
依然是全屏显现,那么咱们给这个赤色的Container
添加一个子部件:
这个时分咱们再次刷新界面发现作用如下:
添加了一个Icon
图标之后,Container
显现出来了,并且本来的橙色的Container
高度也改动了;这是自适应弹性布局的烘托作用:父部件会跟随子部件的内容进行改动;
咱们再给赤色Container
添加一个内边距:
这个时分咱们再来看一下运转作用:
成果,赤色Container
区域扩展,同时橙色的Container
也同步扩展;那么再添加一个外边距呢:
咱们再次检查烘托作用:
赤色Container
大小不变,而橙色的Container
区域再次扩展了;高度扩展了15*2
;
那么,如果赤色区域的Container
高度设置过小或许过大会出现什么情况呢?
咱们先给Icon
高度设置为30
,那么依照现在高度的计算,赤色区域Container
高度为:
20 + 30 + 20 = 70
接下来,咱们给赤色Container
高度设置为200
;代码如下:
运转成果;
然后,咱们再将高度设置为50
:
运转成果;
成果显现,高度改动之后,Container
的高度显现正确,可是内部的小部件由于布局无法满意的问题,显现将会出现问题;
同样的,咱们去掉赤色Container
的高度,然后改动橙色Container
的高度来看一下成果;依照当时高度的计算:
30 + 20 * 2+ 15 * 2 = 100
橙色Container
的高度是100,那么如果给Container
的高度设置为小于100
会是什么姿态呢?
运转成果如下:
内部部件显现也会出现问题,所以咱们在进行布局的时分,关于布局的计算一定要仔细;