Flutter開發之布局 1 Column(15)

2021-09-24 19:32:37 字數 1863 閱讀 1068

布局對於移動開發來說,是開發頁面的第一步,只有掌握了布局,才能做到心裡明白,才能更好、更巧妙的布局。我ios 一點點的從demo 實踐中學習flutter布局。避免不了從ios 的布局角度嘗試,但是發現flutter 更ios 區別很大,flutter 的布局和安卓、h5的布局非常相似。我只能一點一點的琢磨學習。根據一篇寫的不錯的文章,加深理解。

1、mainaxisalignment:主軸布局方式,column主軸方向是垂直的方向

預設值:mainaxisalignment.start:

start ,沿著主軸方向(垂直方向)頂部對齊;

end,沿著主軸方向(垂直方向)底部對齊;

center,沿著主軸方向(垂直方向)居中對齊;

spacebetween ,沿著主軸方向(垂直方向)平分剩餘空間;

spacearound,把剩餘空間平分成n份,n是子widget的數量,然後把其中乙份空間分成2份,放在第乙個child的前面,和最後乙個child的後面;

spaceevenly,把剩餘空間平分n+1份,然後平分所有的空間,請注意和spacearound的區別;

2、crossaxisalignment: 交叉軸的布局方式,對於column來說就是水平方向的布局方式

預設值:crossaxisalignment.center,預設是水平居中

start ,垂直主軸方向(水平方向)左側對齊;

end,垂直主軸方向(水平方向)右側對齊;

center,垂直主軸方向(水平方向)居中對齊;

stretch ,垂直主軸方向(水平方向)拉伸子child;

baseline,這個要和textbaseline一起使用,;

3、verticaldirection:就是子child的垂直布局方向,向上還是向下

預設值:verticaldirection.down 也就是從上到下的布局

down ,從上向下布局,上圖示例我的**是紅、藍、黃;

up,反過來從下向上布局,反過來就是黃、藍、紅;

認真揣摩它的奧妙,慢慢的就能掌握和ios 一樣的布局了!漫漫flutter 布局路啊!

flutter 之 布局學習

flutter 中的布局常用的有 container row column static 等 有了這些 基本上都能搭配出不同的ui介面了 今天來逐一介紹 container flutter 中的uiview class layoutdemo extends statelesswidget 如上 會顯...

Flutter學習之縱向布局

import package flutter material.dart void main class columns extends statelesswidget 縱向布局也就是以縱軸為主軸 mainaxisalignment 橫軸為輔助軸 crossaxisalignment 進行布局,然後...

Flutter學習之縱向布局

import package flutter material.dart void main class columns extends statelesswidget 縱向布局也就是以縱軸為主軸 mainaxisalignment 橫軸為輔助軸 crossaxisalignment 進行布局,然後...