左对齐是将文字段落的左边边缘对齐;
两端对齐是将文字段落的左右两端的边缘都对齐;
两者异同:
这两种对齐方式的左边都是对齐的,而一般来说,如果段末最后一行字数太少,那么最后一行“两端对齐”的效果与“左对齐”的效果一样;又由于我们的阅读习惯基本上都是从左到右,且中文文章中的行尾相差不,不注意看不出其中差别,因此,人们就会觉得“左对齐”与“两端对齐”的效果一样。
其实呢,两者之间是有区别的,“两端对齐”的段落的右边也是对齐的,而“左对齐”的右边一般情况下不会对齐。做个试验:你在word中输入一段比较长的英文文字,分别使用两种不同的对齐方式,仔细观察,就会发现两者之间的差别了。
因为一般来说,我们有这样的书写规则:
大部分标点符号不能放在行首,比如句号“。”、问号“?”等;
一串字符(一个英文单词、一串数字)不能拆开或割断放在不同的两行;
于是,在这样的书写规则下,我们常常会遇到文章各行的文字(字符)数不相等的情况,这时采用“左对齐”的方式,就会出现每行行尾不整齐的情况,而采用“两端对齐”的方式,就会把超出的行压缩、减少的行拉伸,使整个段落各行右端也对齐(末行除外),这样的文章看上去就比较美观些。
在两端对齐方式中,由于通常每段最后一行都比其他行短,文本会显得没有两端对齐。要使具有两端对齐格式的段落中的最后一行也两端对齐,请将插入点置于最后一行末尾,然后按 Shift+Enter。请注意,如果对齐的行很短,会在单词间插入大段的空白,因而会使该行显得不美观。
所谓线性布局,即指沿水平或垂直方向排列子组件。Flutter 中通过Row和Column来实现线性布局,类似于Android 中的LinearLayout控件。Row和Column都继承自Flex,我们将在d性布局一节中详细介绍Flex
对于线性布局,有主轴和纵轴之分,如果布局是沿水平方向,那么主轴就是指水平方向,而纵轴即垂直方向;如果布局沿垂直方向,那么主轴就是指垂直方向,而纵轴就是水平方向。在线性布局中,有两个定义对齐方式的枚举类MainAxisAlignment和CrossAxisAlignment,分别代表主轴对齐和纵轴对齐。
Row可以沿水平方向排列其子widget。定义如下:
解释:第一个Row很简单,默认为居中对齐;第二个Row,由于mainAxisSize值为MainAxisSize.min,Row的宽度等于两个Text的宽度和,所以对齐是无意义的,所以会从左往右显示;第三个Row设置textDirection值为TextDirection.rtl,所以子组件会从右向左的顺序排列,而此时MainAxisAlignment.end表示左对齐,所以最终显示结果就是图中第三行的样子;第四个 Row 测试的是纵轴的对齐方式,由于两个子 Text 字体不一样,所以其高度也不同,我们指定了verticalDirection值为VerticalDirection.up,即从低向顶排列,而此时crossAxisAlignment值为CrossAxisAlignment.start表示底对齐
Column可以在垂直方向排列其子组件。参数和Row一样,不同的是布局方向为垂直,主轴纵轴正好相反,读者可类比Row来理解,下面看一个例子:
解释:
实际上,Row和Column都只会在主轴方向占用尽可能大的空间,而纵轴的长度则取决于他们最大子元素的长度 。如果我们想让本例中的两个文本控件在整个手机屏幕中间对齐,我们有两种方法:
如果Row里面嵌套Row,或者Column里面再嵌套Column,那么只有最外面的Row或Column会占用尽可能大的空间,里面Row或Column所占用的空间为实际大小,下面以Column为例说明:
如果要让里面的Column占满外部Column,可以使用Expanded 组件:
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)