「这是我参与11月更文应战的第5天,活动概况检查:2021终究一次更文应战」

Text

默许显现

在咱们进行日常开发作业中,Text能够说是咱们运用最多的部件了,那么咱们来研究一下Text的相关运用;
首先,咱们来看一下一段文本在Text上的默许显现作用:

Text('Flutter是谷歌的移动UI结构,能够快速在iOS和Android上构建高质量的原生用户界面。 Flutter能够与现有的代码一同作业。在全世界,Flutter正在被越来越多的开发者和安排运用,并且Flutter是完全免费、开源的。');

其显现作用如下:
image.png

居中显现

textAlign: TextAlign.center,

显现作用如下:
image.png

TextStyle

创建一个TextStyleTextstyle属性赋值,用来改动字体大小及粗细;

  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,
    );
  }

显现作用如下:
image.png

maxLines

显现最大行数:

return Text(
      'Flutter是谷歌的移动UI结构,能够快速在iOS和Android上构建高质量的原生用户界面。 Flutter能够与现有的代码一同作业。在全世界,Flutter正在被越来越多的开发者和安排运用,并且Flutter是完全免费、开源的。',
      textAlign: TextAlign.center,
      style: _textStyle,
      maxLines: 2,
    );

代码运转作用如下:
image.png

overflow

�多余行数咱们以...来显现:
image.png
显现作用:
image.png

文本拼接

显现文字很简略,可是在开发进程中常常是需求拼接文本的,那么又该如何处理呢?

咱们先界说几个文本字符串:

  final String _title = '《法外狂徒张三的自我修养》';
  final String _lector = '讲师:';
  final String _name = '罗翔';

那么,咱们如何将这三个字符串进行拼接呢?在Flutter中能够运用$来进行操作:

Text(
	'$_title -- $_lector$_name',
	textAlign: TextAlign.center,
	style: _textStyle,
);

咱们来看一下显现作用:
image.png

RichText

简略的Text显现文字很简略,可是这还不足以满意咱们的开发需求,咱们在开发进程中常常会有需求显现富文本的情况,那么又该如何处理呢?

这个时分就需求运用RichText部件了;再运用RichText时结合TextSpan一同运用:
image.png
终究显现作用如下:
image.png

Container

Container这个部件在咱们开发进程中会常常用到;

咱们先来给Container添加一个颜色:

Container(
	color: Colors.orange,
);

咱们执行代码之后发现,这个Container是整个屏幕大小:
image.png
这是为什么呢?这是由于Container默许大小是由其父部件决议的,会铺满父部件;

咱们在Container里边运用Row部件布局,再添加一个Container
image.png
运转发现,赤色的Container是无法显现的,橙色的Container依然是全屏显现,那么咱们给这个赤色的Container添加一个子部件:
image.png
这个时分咱们再次刷新界面发现作用如下:
image.png
添加了一个Icon图标之后,Container显现出来了,并且本来的橙色的Container高度也改动了;这是自适应弹性布局的烘托作用:父部件会跟随子部件的内容进行改动;

咱们再给赤色Container添加一个内边距:
image.png
这个时分咱们再来看一下运转作用:
image.png
成果,赤色Container区域扩展,同时橙色的Container也同步扩展;那么再添加一个外边距呢:
image.png
咱们再次检查烘托作用:
image.png
赤色Container大小不变,而橙色的Container区域再次扩展了;高度扩展了15*2

那么,如果赤色区域的Container高度设置过小或许过大会出现什么情况呢?

咱们先给Icon高度设置为30,那么依照现在高度的计算,赤色区域Container高度为:

20 + 30 + 20 = 70

接下来,咱们给赤色Container高度设置为200;代码如下:
image.png
运转成果;
image.png

然后,咱们再将高度设置为50
image.png
运转成果;
image.png
成果显现,高度改动之后,Container的高度显现正确,可是内部的小部件由于布局无法满意的问题,显现将会出现问题;

同样的,咱们去掉赤色Container的高度,然后改动橙色Container的高度来看一下成果;依照当时高度的计算:

30 + 20 * 2+ 15 * 2 = 100

橙色Container的高度是100,那么如果给Container的高度设置为小于100会是什么姿态呢?
image.png
运转成果如下:
image.png
内部部件显现也会出现问题,所以咱们在进行布局的时分,关于布局的计算一定要仔细;