Flutter開發日記——Flutter佈局Widget詳解（下）
Row
一、簡介緩存
- Row組件是一個橫向排布的佈局組件，跟h5的Flex佈局同樣，只不過限定了橫向排布
二、構造函數ide
Row({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
})
複製代碼
- mainAxisAlignment：主軸方向的排布方式，因爲是橫向佈局，其主軸是橫向的水平線
- center：主軸中心
- start：主軸起點
- end：主軸末尾
- spaceAround：主軸中間空白區域均分，首尾空白區域爲1/2
- spaceBetween：主軸中間空白區域均分，首尾沒有空白區域
- spaceEvenly：主軸中間空白區域均分，首尾平分空白區域
- mainAxisSize：主軸方向佔有空間的值
- max：佔用最大空間
- min：佔用最小空間
- crossAxisAlignment：側軸方向的排布方式，因爲是橫向佈局，其側軸是垂直的豎線
- baseline：側軸與baseline對齊
- center：側軸居中顯示
- end：側軸末尾顯示
- start：側軸起點顯示
- stretch：側軸填滿顯示
- textDirection：文字的排布方式
- TextDirection.ltr：從左到右
- TextDirection.rtl：從右到左
- verticalDirection：子控件的排布方式
- down：從左上角到右下角進行佈局
- up：從右下角到左上角進行佈局
- textBaseline：文字的基準線
- children：子控件集合
三、例子函數
三個容器橫向排放佈局
Widget _buildColumn() {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
textDirection: TextDirection.ltr,
textBaseline: TextBaseline.alphabetic,
mainAxisSize: MainAxisSize.max,
verticalDirection: VerticalDirection.down,
children: <Widget>[
Container(
height: 50,
width: 50,
color: Colors.blueAccent,
),
Container(
height: 50,
width: 50,
color: Colors.redAccent,
),
Container(
height: 50,
width: 50,
color: Colors.greenAccent,
)
],
);
}
複製代碼
Column
一、簡介ui
- Column組件是一個豎向排布的佈局組件，跟h5的Flex佈局同樣，只不過限定了豎向排布
二、構造函數this
Column({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
})
複製代碼
- mainAxisAlignment：主軸方向的排布方式，因爲是豎向佈局，其主軸是豎向的垂直線
- center：主軸中心
- start：主軸起點
- end：主軸末尾
- spaceAround：主軸中間空白區域均分，首尾空白區域爲1/2
- spaceBetween：主軸中間空白區域均分，首尾沒有空白區域
- spaceEvenly：主軸中間空白區域均分，首尾平分空白區域
- mainAxisSize：主軸方向佔有空間的值
- max：佔用最大空間
- min：佔用最小空間
- crossAxisAlignment：側軸方向的排布方式，因爲是豎向佈局，其側軸是橫向的水平線
- baseline：側軸與baseline對齊
- center：側軸居中顯示
- end：側軸末尾顯示
- start：側軸起點顯示
- stretch：側軸填滿顯示
- textDirection：文字的排布方式
- TextDirection.ltr：從左到右
- TextDirection.rtl：從右到左
- verticalDirection：子控件的排布方式
- down：從左上角到右下角進行佈局
- up：從右下角到左上角進行佈局
- textBaseline：文字的基準線
- children：子控件集合
三、例子spa
三個容器豎向排放，因爲設置了up的擺放方式，致使位置是倒過來的.net
Widget _buildColumn() {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
verticalDirection: VerticalDirection.up,
textBaseline: TextBaseline.alphabetic,
textDirection: TextDirection.ltr,
children: <Widget>[Container(
height: 50,
width: 50,
color: Colors.blueAccent,
),
Container(
height: 50,
width: 50,
color: Colors.redAccent,
),
Container(
height: 50,
width: 50,
color: Colors.greenAccent,
)],
);
}
複製代碼
Stack
一、簡介代理
- Stack組件是能夠互相疊在一塊兒的佈局，相似於一個棧
- Stack組件經過alignment去決定子控件的位置
二、構造函數code
Stack({
Key key,
this.alignment = AlignmentDirectional.topStart,
this.textDirection,
this.fit = StackFit.loose,
this.overflow = Overflow.clip,
List<Widget> children = const <Widget>[],
})
複製代碼
- alignment：控制child的對齊方式
- textDirection：文字的排布方式
- TextDirection.ltr：從左到右
- TextDirection.rtl：從右到左
- fit：定義子控件集合的尺寸
- StackFit.loose：子控件的尺寸不受限制
- StackFit.expand：子控件的尺寸儘量大
- StackFit.passthrough：不改變子控件的約束條件
- overflow：超出佈局自己的處理
- Overflow.clip：超出的佈局被裁剪
- Overflow.visible：超出的佈局被顯示
- children：子控件集合
三、例子
將兩個容器疊加在一塊兒，而且在對齊右下角
Widget _buildColumn() {
return Stack(
textDirection: TextDirection.ltr,
alignment: Alignment.bottomRight,
overflow: Overflow.visible,
fit: StackFit.loose,
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.greenAccent,
),
Container(
height: 50,
width: 50,
color: Colors.redAccent,
)
],
);
}
複製代碼
IndexedStack
一、簡介
- IndexedStack控件本質繼承了Stack組件，區別在於經過index增長了層級控制，控制層級的顯示
二、構造函數
IndexedStack({
Key key,
AlignmentGeometry alignment = AlignmentDirectional.topStart,
TextDirection textDirection,
StackFit sizing = StackFit.loose,
this.index = 0,
List<Widget> children = const <Widget>[],
})
複製代碼
- alignment：控制child的對齊方式
- textDirection：文字的排布方式
- TextDirection.ltr：從左到右
- TextDirection.rtl：從右到左
- sizing：定義子控件集合的尺寸
- StackFit.loose：子控件的尺寸不受限制
- StackFit.expand：子控件的尺寸儘量大
- StackFit.passthrough：不改變子控件的約束條件
- index：控制第幾個child的顯示，0表示第一個
- children：子控件集合
三、例子
經過index控制第二個容器的出現，第一個容器則隱藏
Widget _buildColumn() {
return IndexedStack(
index: 1,
sizing: StackFit.loose,
textDirection: TextDirection.ltr,
alignment: Alignment.bottomRight,
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.greenAccent,
),
Container(
height: 50,
width: 50,
color: Colors.redAccent,
)
],
);
}
複製代碼
Flow
一、簡介
- Flow控件至關於流式佈局，其佈局的擺佈方式任由開發者去控制
二、構造函數
Flow({
Key key,
@required this.delegate,
List<Widget> children = const <Widget>[],
})
複製代碼
- delegate：佈局管理器，能夠管理佈局的擺放
- children：子控件集合
三、例子
在Flow佈局中擺放一堆容器，而且大小不一
Widget _buildColumn() {
return Flow(
delegate: GridFlowDelegate(margin: EdgeInsets.all(10.0)),
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.greenAccent,
),
Container(
height: 50,
width: 50,
color: Colors.redAccent,
),
Container(
width: 100,
height: 100,
color: Colors.greenAccent,
),
Container(
height: 50,
width: 50,
color: Colors.redAccent,
),
Container(
width: 100,
height: 100,
color: Colors.greenAccent,
),
Container(
height: 50,
width: 50,
color: Colors.redAccent,
),
Container(
width: 100,
height: 100,
color: Colors.greenAccent,
),
Container(
height: 50,
width: 50,
color: Colors.redAccent,
),
Container(
width: 100,
height: 100,
color: Colors.greenAccent,
)
],
);
}
複製代碼
在佈局管理器中，自定義咱們的擺佈方式，以一行中最高的容器做爲換行的高度進行橫向擺佈
class GridFlowDelegate extends FlowDelegate {
EdgeInsets margin = EdgeInsets.zero;
GridFlowDelegate({this.margin});
@override
void paintChildren(FlowPaintingContext context) {
var x = margin.left; //繪製子控件的x座標
var y = margin.top; //繪製子控件的y座標
var maxHeightIndex = 0; //同一行中最大高度的子控件的索引，用於換行
for (int i = 0; i < context.childCount; i++) {
// 當前控件須要的最大寬度 = 控件自己的寬度 + 左右邊距
var w = context.getChildSize(i).width + x + margin.right;
if (w < context.size.width) {
// 若是未超出當前未分配的寬度，則直接平移到對應位置畫出來
context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));
// 下一次的x座標
x = w + margin.left;
// 在第二個控件開始取同一行的最大高度的控件
if (i >= 1){
var currentHeight = context.getChildSize(i).height + margin.top + margin.bottom;
var lastHeight = context.getChildSize(maxHeightIndex).height + margin.top + margin.bottom;
if (currentHeight > lastHeight) {
// 保留最大高度的索引值
maxHeightIndex = i;
}
}
}else{
// 若是超出當前未分配的寬度，則先歸位x座標恢復默認值，從左邊開始從新分配空間
x = margin.left;
// y座標
y += context.getChildSize(maxHeightIndex).height + margin.top + margin.bottom;
// 找到座標後直接平移到對應位置畫出來
context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));
// 下一次的x座標須要將它加上本身的寬度，和本身的左右邊距
x += context.getChildSize(i).width + margin.left + margin.right;
}
}
}
@override
bool shouldRepaint(FlowDelegate oldDelegate) {
return oldDelegate != this;
}
}
複製代碼
Table
一、簡介
- Table控件具備控制寬度和位置的表格控件
二、構造函數
Table({
Key key,
this.children = const <TableRow>[],
this.columnWidths,
this.defaultColumnWidth = const FlexColumnWidth(1.0),
this.textDirection,
this.border,
this.defaultVerticalAlignment = TableCellVerticalAlignment.top,
this.textBaseline,
})
複製代碼
- children：子控件集合
- columnWidths：表格的寬度
- defaultColumnWidth：默認表格的寬度
- top：頂部
- middle：垂直居中
- bottom：底部
- baseline：文本baseline對齊
- fill：充滿整個單元
- textDirection：文字的對齊方式
- border：表格的邊框
- defaultVerticalAlignment：默認的表格位置對齊方式
- textBaseline：文字baseline類型
- alphabetic：對齊字符底部的水平線
- ideographic：對齊表意字符的水平線
三、例子
將文字居底對齊的表格
Widget _buildColumn() {
return Table(
textDirection: TextDirection.ltr,
textBaseline: TextBaseline.alphabetic,
defaultColumnWidth: FixedColumnWidth(80.0),
defaultVerticalAlignment: TableCellVerticalAlignment.bottom,
border:
TableBorder.all(color: Colors.blueGrey, style: BorderStyle.solid),
columnWidths: {
0: FixedColumnWidth(50.0),
1: FixedColumnWidth(100.0),
2: FixedColumnWidth(100.0),
},
children: <TableRow>[
TableRow(children: [
Text("序號"),
Text("名字"),
Text("成績"),
]),
TableRow(children: [
Text("1"),
Text("張三"),
Text("80"),
]),
TableRow(children: [
Text("2"),
Text("李四"),
Text("88"),
]),
TableRow(children: [
Text("3"),
Text("王五"),
Text("92"),
])
]);
}
複製代碼
Wrap
一、簡介
- Wrap控件至關於流式佈局，會自動換行，比Flex自定義的功能好用
二、構造函數
Wrap({
Key key,
this.direction = Axis.horizontal,
this.alignment = WrapAlignment.start,
this.spacing = 0.0,
this.runAlignment = WrapAlignment.start,
this.runSpacing = 0.0,
this.crossAxisAlignment = WrapCrossAlignment.start,
this.textDirection,
this.verticalDirection = VerticalDirection.down,
List<Widget> children = const <Widget>[],
})
複製代碼
- direction：主軸的方向
- Axis.horizontal：橫向排布
- Axis.vertical：豎向排布
- alignment：主軸方向上的對齊方式
- spacing：主軸方向上的間距
- runAlignment：橫向排布的話，表示一行的對齊方式，豎向排布的話，表示一列的對齊方式
- runSpacing：一行或者一列方向上的間距
- crossAxisAlignment：側軸方向的對齊方式
- textDirection：文本的對齊方式
- verticalDirection：子控件的排布方式
- down：從左上角到右下角進行佈局
- up：從右下角到左上角進行佈局
- children：子控件集合
三、例子
經過Wrap控件建立出豎向的流式佈局
Widget _buildColumn() {
return Wrap(
textDirection: TextDirection.ltr,
alignment: WrapAlignment.center,
verticalDirection: VerticalDirection.down,
crossAxisAlignment: WrapCrossAlignment.center,
direction: Axis.horizontal,
runAlignment: WrapAlignment.center,
runSpacing: 10.0,
spacing: 10.0,
children: <Widget>[
Chip(
label: Text("張三張三張三"),
),
Chip(
label: Text("李四李四李四"),
),
Chip(
label: Text("王五王五王五"),
),
Chip(
label: Text("趙六趙六趙六"),
),
Chip(
label: Text("錢七"),
),
Chip(
label: Text("孫八"),
),
],
);
}
複製代碼
ListBody
一、簡介
- ListBody控件通常會配合ListView使用，屬於ListView的子節點
- ListBody控件的做用是按給定的軸方向，按照順序排列子節點
二、構造函數
ListBody({
Key key,
this.mainAxis = Axis.vertical,
this.reverse = false,
List<Widget> children = const <Widget>[],
})
複製代碼
- mainAxis：主軸方向
- Axis.vertical：垂直方向
- Axis.horizontal：橫向方向
- reverse：是否控件翻轉過來
- children：子控件集合
三、例子
顯示3個不一樣顏色的容器，因爲其父容器是Flex，會致使ListBody的側軸被拉昇到最大
Widget _buildColumn() {
return Flex(
direction: Axis.vertical,
children: <Widget>[
ListBody(
mainAxis: Axis.vertical,
reverse: false,
children: <Widget>[
Container(
height: 50,
width: 50,
color: Colors.blueAccent,
),
Container(
height: 50,
width: 50,
color: Colors.redAccent,
),
Container(
height: 50,
width: 50,
color: Colors.greenAccent,
)
],
),
],
);
}
複製代碼
ListView
一、簡介
- ListView控件是個功能豐富的列表組件
二、構造函數
ListView({
Key key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
this.itemExtent,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
double cacheExtent,
List<Widget> children = const <Widget>[],
})
複製代碼
- scrollDirection：滾動放向
- reverse：子控件是否翻轉
- controller：用來控制滾動位置及監聽滾動事件
- primary：當內容不足以滾動時，是否支持滾動
- physics：控制用戶滾動視圖的交互
- AlwaysScrollableScrollPhysics：列表老是可滾動的
- PageScrollPhysics：一頁一頁的列表滑動，通常用於PageView控件用的滑動效果，滑動到末尾會有比較大的彈起
- ClampingScrollPhysics：滾動時沒有回彈效果
- NeverScrollableScrollPhysics：就算內容超過列表範圍也不會滑動
- BouncingScrollPhysics：不論什麼平臺都會有回彈效果
- FixedExtentScrollPhysics：僅滾動到子項而不存在任何偏移，必須與使用FixedExtentScrollController的可滾動對象一塊兒使用
- shrinkWrap：是否根據子widget的總長度來設置ListView的長度
- padding：父控件的內邊距
- itemExtent：指定子控件的固定高度
- addAutomaticKeepAlives：是否將子控件包裹在AutomaticKeepAlive控件內
- addRepaintBoundaries：是否將子控件包裹在 RepaintBoundary 控件內。用於避免列表滾動時的重繪
- cacheExtent：可見區域的先後會有必定高度的空間去緩存子控件，當滑動時就能夠迅速呈現
- children：子控件集合
三、例子
建立三個具備回彈功能的列表控件
Widget _buildColumn() {
return ListView(
physics: BouncingScrollPhysics(),
cacheExtent: 10.0,
primary: true,
padding: EdgeInsets.all(15.0),
reverse: false,
scrollDirection: Axis.vertical,
children: <Widget>[
Container(
height: 300,
width: 300,
color: Colors.blueAccent,
),
Container(
height: 300,
width: 300,
color: Colors.redAccent,
),
Container(
height: 300,
width: 300,
color: Colors.greenAccent,
)
],
);
}
複製代碼
CustomMultiChildLayout
一、簡介
- CustomMultiChildLayout控件和CustomSingleChildLayout相似，區別於CustomMultiChildLayout能夠控制多個控件
- CustomMultiChildLayout控件控制的子控件是經過Id進行區分和擺放
二、構造函數
CustomMultiChildLayout({
Key key,
@required this.delegate,
List<Widget> children = const <Widget>[],
})
複製代碼
- delegate：控制子控件集合的代理類
- children：子控件集合
三、例子
首先建立控件的代理類，包括控件的大小和控件的位置，經過id獲取傳遞過來的子控件，將description的控件放置在title下方
class IdLayoutDelegate extends MultiChildLayoutDelegate {
IdLayoutDelegate();
@override
void performLayout(Size size) {
BoxConstraints constraints = BoxConstraints(maxWidth: size.width);
// 經過id獲取對應的控件大小
Size titleSize = layoutChild("title", constraints);
Size descriptionSize = layoutChild("description", constraints);
// 擺放id的控件位置
positionChild("title", Offset(0.0, 0.0));
positionChild("description", Offset(0.0, titleSize.height));
}
@override
bool shouldRelayout(MultiChildLayoutDelegate oldDelegate) {
return oldDelegate != null;
}
}
複製代碼
經過id將對應的控件擺佈在對應的位置
Widget _buildColumn() {
return CustomMultiChildLayout(
delegate: IdLayoutDelegate(),
children: <Widget>[
LayoutId(
id: "title",
child: Text("Hensen"),
),
LayoutId(
id: "description",
child: Text("Flutter工程師"),
)
],
);
}
複製代碼
LayoutBuilder
一、簡介
- LayoutBuilder控件能夠經過獲取父控件的約束條件，從而控制佈局的返回結果
二、構造函數
const LayoutBuilder({
Key key,
LayoutWidgetBuilder builder,
})
複製代碼
- builder：子控件的構建者
三、例子
經過判斷父控件的尺寸大小，若是是大尺寸，就用大圖標，若是是小尺寸，就用小圖標
Widget _buildColumn() {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if (constraints.maxWidth > 200.0) {
// 尺寸大的
return FlutterLogo(size: 200);
}
// 尺寸小的
return FlutterLogo(size: 50);
},
);
}
複製代碼
做者
| Hensen_ |
相關文章
- 1. Flutter開發日記——Flutter佈局Widget詳解（下）
- 2. Flutter開發日記——Flutter佈局Widget詳解（上）
- 3. Flutter Container Widget 佈局詳解
- 4. Flutter開發日記——Flutter動畫&Motion Widget詳解（下）
- 5. Flutter開發日記——Flutter動畫&Motion Widget詳解（上）
- 6. Flutter開發筆記08 - Flutter佈局Widget練習
- 7. Flutter(九)之Flutter的佈局Widget
- 8. Flutter入門 - 佈局Widget
- 9. Flutter之佈局類Widget
- 10. Flutter 佈局詳解
- 更多相關文章...
- • MySQL下載步驟詳解 - MySQL教程
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • PHP開發工具
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 跳槽面試的幾個實用小技巧，不妨看看！
- 2. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 3. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 4. 如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 5. Mac OS非兼容Windows軟件運行解決方案——「以VMware & Microsoft Access爲例「
- 6. 封裝 pyinstaller -F -i b.ico excel.py
- 7. 數據庫作業三ER圖待完善
- 8. nvm安裝使用低版本node.js(非命令安裝)
- 9. 如何快速轉換圖片格式
- 10. 將表格內容分條轉換爲若干文檔
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Flutter開發日記——Flutter佈局Widget詳解（下）
- 2. Flutter開發日記——Flutter佈局Widget詳解（上）
- 3. Flutter Container Widget 佈局詳解
- 4. Flutter開發日記——Flutter動畫&Motion Widget詳解（下）
- 5. Flutter開發日記——Flutter動畫&Motion Widget詳解（上）
- 6. Flutter開發筆記08 - Flutter佈局Widget練習
- 7. Flutter(九)之Flutter的佈局Widget
- 8. Flutter入門 - 佈局Widget
- 9. Flutter之佈局類Widget
- 10. Flutter 佈局詳解