了解 Flutter中的 Row 和 Column
我们将在本博客中介绍两个不同的小部件,即Row和Column。将两个小部件集成在一起的原因是,这两个小部件具有相似的属性,可帮助您有效地理解它们。
我们知道Flutter中的所有内容都是一个小部件,这意味着您在屏幕上看到的所有内容都是Flutter中的一个小部件,同样,Row和Column也是Flutter中的小部件,几乎每个布局都可以按行和列进行分解,这一点很重要。因此,让我们逐一探讨它们……
Row
假设您要在屏幕上水平显示许多小部件,例如“文本”和“图像”,那就是使用Row小部件的地方,它以水平方式显示小部件。
Row 是一个多子级布局的小部件,它将小部件作为其子级。在可见视图中一行显示小部件,即不滚动。使用ListView能创建可滚动列表,我们将在后续文章中进行讨论。
请看以下代码,其中包含“Row”,其中“Text”包装在“ Flexible”中,而 “FlutterLogo”是直接作为Row的子部件。
Flexible 包装了文本,保证了如果 Row的内容溢出时,能够进行压缩。如果去掉Flexible,则会出现下面的错误提示:
Column
现在,我们知道要以水平方式放置小部件,我们可以使用“Row”,但是当必须以垂直方式放置小部件时该怎么做,这就是“ Column”发挥作用的地方。
代码将竖直展示文本和图片,效果如下:
如果我们再添加上一个Text部件,让竖直方向的内容溢出,也会出现Row中内容溢出时候的错误:
Row 和 Column 的属性
现在我们已经大概了解了以下几点:
- 什么是行和列?
- 如何使用行和列。
- 什么时候使用和什么时候不使用?
- 行和列面临的基本问题
- 以及如何处理。
我们继续看一下他们的属性:
Row的构造函数:
mainAxisAlignment 和 crossAxisAlignment
此属性表示 children 的子组件布局方式。
当为Row时:mainAxisAlignment 就是水平方向, crossAxisAlignment就为竖直方向
当为Column时:mainAxisAlignment 就是竖直方向, crossAxisAlignment就为水平方向
mainAxisSize
此属性指示 children 应在主轴上占据多少空间。在布局中,为children分配空间后,可能会有一些可用空间。mainAxisSize告诉是最大化还是最小化可用空间。
textBaseline
textDirection
此属性确定水平放置子级的顺序,是从左到右还是从右到左
verticalDirection
此属性确定水平放置子级的顺序,是从上到下还是从下到上