Flexbox
Flex布局意思为弹性布局,他使用起来非常的方便。
他主要有以下几种属性
flexDirection //设置主轴方向 flexWrap //设置是否换行 justifyContent //主轴对齐方式 alignItems //交叉轴对齐方式
我们将上一篇中的布局样式修改一下,来介绍flex布局的主要属性。
可以看到Text和Image是竖直排列的,下面将其改为水平排列,只需要在style添加一行
即可
如图所示,要决定主轴的方向(水平、垂直),可以按照如下设置
这个属性用于设置是否换行,默认为nowrap,即不换行,为了演示,将图片改小,添加多几个Text。
此时,添加flexWrap属性
发现已经成功换行。
如图所示,要决定是否换行,可以按照如下设置
这个属性用于视图在主轴上的对其方式,主要有如下几种
顺序效果如下:
注意仔细区分between和around的区别。
这个属性是指主轴的交叉轴的对其方式(X,Y轴对应),主要有以下几种
为了区分我给text加了背景 注意其细微的区别
到此,Flex的常用属性就已经介绍完毕了
下面我们设计以下布局,将文字放到海报的右方。因为整体水平排列,内部垂直排列,所以我们需要多加一个容器将两个Text包裹起来(Android对比LinearLayout嵌套)。修改之后的代码如下:
style如下
现在界面已经如下所示了:
嗯嗯 感觉不错。今天就到这里吧。