flutter 中的布局常用的有 container row column static 等 有了這些 基本上都能搭配出不同的ui介面了 今天來逐一介紹
container flutter 中的uiview
class layoutdemo extends statelesswidget
}
container 結合row
新增child 顯示如下
child: row(
children: [
text("左邊", style: textstyle(color: colors.yellow),),
text("中間", style: textstyle(color: colors.blue),),
text("右邊", style: textstyle(color: colors.green),),
屬性講解 mainaxisalignment 主軸方向上的排列
mainaxisalignment.center, 劇中
mainaxisalignment.start 居左
mainaxisalignment.end 居右
下邊這個3個是對空餘位置的分配
mainaxisalignment.spacearound 每個子widget 都有空隙
mainaxisalignment.spacebetween 首尾子widget 貼邊
mainaxisalignment.spaceevenly 空餘位置均分
crossaxisalignment 副軸方向的排列 只是方向變化跟主軸差不多
row布局 橫向是主軸 縱向是副軸 column 縱向是主軸 橫向是副軸
row 結合 expended
expanded(
child: text(
"中間",
style: textstyle(color: colors.blue),
),),
expended 自動填充剩餘所有的寬度 結果就是 mainaxisalignment 會失效中間的子widget 會把兩邊的擠到兩端
static 組合positioned
class staticdemo extends statelesswidget
}
效果如下圖所示
加上positioned
positioned(
top: 100,
child: container(
width: 50,
height: 50,
color: colors.blue,),)
效果如下
所以 stack 結合 positioned 可以定義子widget的 位置的
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 進行布局，然後...
flutter學習 布局
名稱 型別說明 scrolldirection axis axis.horizontal axis.vertical padding edgeinsetsgeometry 內邊距resolve bool 元件反向排序 children list 列表元素 listview.builder itemc...