Flutter 系列文章：Flutter Column 控件介紹
Column —— 列布局
1、使用方法
Column({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,//設置主軸方向上的對齊方式
MainAxisSize mainAxisSize = MainAxisSize.max,//設置主軸方向佔有空間的值，默認是max (MainAxisSize的取值有兩種：max：根據傳入的佈局約束條件，最大化主軸方向的可用空間；min：與max相反，是最小化主軸方向的可用空間；)
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,//設置交叉軸方向上的對齊方式
TextDirection textDirection,//設置文字的排列方向，能夠經過在設置Row主軸的基礎上設置 改變主軸的方向
VerticalDirection verticalDirection = VerticalDirection.down,//設置主軸的基礎上，能夠經過設置verticalDirection改變主軸的方向
TextBaseline textBaseline,//設置
List<Widget> children = const <Widget>[],//子控件列表
})
複製代碼
1. 用於在垂直方向中顯示其子項，另經過
//todo 例子1. Column，用於在垂直方向中顯示其子項。
Column(
children: <Widget>[
//Expanded 用於展開Row，Column或Flex的子項的窗口小部件。
//使用「 Expanded」小部件能夠擴展行，列或Flex的子項 以填充主軸中的可用空間（例如，水平爲行或垂直爲列）。若是擴展了多個子節點，則根據彈性因子將可用空間劃分爲多個子節點。
Expanded(
//構造函數 擴展（{ Key key， int flex：1， @required Widget child }）
//@required child 爲必填參數，指要填充的子控件
child: Text('Deliver features faster', textAlign: TextAlign.center),
// child: Text('Deliver ', textAlign: TextAlign.center),
//孩子最多能夠與可用空間同樣大（但容許更小）
flex: 1,
//鍵
key: ValueKey("1"),
),
Expanded(
child: Text('Craft beautiful', textAlign: TextAlign.center),
//經過還在控件去強制填充能夠用空間，會向兩邊擠壓，以適應這個子控件
flex: 1,
),
Expanded(
flex: 2,
child: FittedBox(
fit: BoxFit.contain, // otherwise the logo will be tiny
child: const FlutterLogo(),
),
),
],
)
複製代碼
2. 爲何個人列有黃色和黑色警告條紋？
若是列非靈活內容（那些未包含在 Expanded或Flexible小部件中的內容）在一塊兒比列自己寬，則說該列已溢出。當列溢出時，該列沒有任何剩餘空間可在其Expanded和Flexible 子級之間共享。該列經過在溢出的邊緣上繪製黃色和黑色條紋警告框來報告此狀況。若是列外側有空間，則溢出量以紅色字體打印。bash
//例子2 爲何個人列有黃色和黑色警告條紋
Column(
children: <Widget>[
const FlutterLogo(
size: 200,
),
const Icon(
Icons.account_circle,
size: 300,
color: Colors.blue,
),
const Icon(
Icons.ac_unit,
size: 200,
color: Colors.yellow,
)
],
)
複製代碼
3. 經過Expanded 包裹自適應均分分佈
能夠解決例子2中的問題，將第二個子項包裝在Expanded小部件中，該小部件告訴列應該爲該子項提供剩餘空間：app
//例子3 經過Expanded 包裹自適應均分分佈
//解決方法 解決方法是將第二個子項包裝在Expanded小部件中，該小部件告訴該列應該爲該子項提供剩餘空間：
Column(
children: <Widget>[
const Expanded(
flex: 1,
child: FittedBox(
fit: BoxFit.contain,
child: const FlutterLogo(),
)
),
const Expanded(
flex: 1,
child: Icon(
Icons.account_circle,
size: 300,
color: Colors.blue,
),
),
Expanded(
flex: 1,
child: Icon(
Icons.access_time,
size: 300,
color: Colors.yellow,
),
),
],
)
複製代碼
2、經常使用屬性
1. 設置主軸方向上的對齊方式 —— mainAxisAlignment
-
在水平方向控件（Row)：less
-
MainAxisAlignment是水平的，默認起始位置在左邊，排列方向爲從左至右，此時能夠經過textDirection來改變MainAxisAlignment的起始位置和排列方向ide
-
在垂直方向的控件中（Column） ：函數
-
MainAxisAlignment是垂直的，默認起始位置在上邊，排列方向爲從上至下，此時能夠經過verticalDirection來改變MainAxisAlignment的起始位置及排列方向佈局
-
MainAxisAlignment 的枚舉類型字體
-
MainAxisAlignment 的枚舉類型flex
enum MainAxisAlignment {
//將子控件放在主軸的開始位置
start,
//將子控件放在主軸的結束位置
end,
//將子控件放在主軸的中間位置
center,
//將主軸空白位置進行均分，排列子元素，手尾沒有空隙
spaceBetween,
//將主軸空白區域均分，使中間各個子控件間距相等，首尾子控件間距爲中間子控件間距的一半
spaceAround,
//將主軸空白區域均分，使各個子控件間距相等
spaceEvenly,
}
複製代碼
- 例子
// 例子5
Column(
mainAxisAlignment: MainAxisAlignment.start,
//todo 在設置Column主軸的基礎上，能夠經過設置verticalDirection改變主軸的方向，
// verticalDirection的默認值爲VerticalDirection.down，也就是從上至下的方向
// verticalDirection的默認值爲VerticalDirection.up，也就是從下至上的方向
verticalDirection:VerticalDirection.down,
children: <Widget>[
Box("aaaaaaa"),
Box("bbbbbbb"),
Box("ccccccc")
],
)
複製代碼
2. 設置交叉軸方向上的對齊方式 —— crossAxisAlignment
-
在水平方向控件（Row)：ui
-
CrossAxisAlignment是垂直的，默認起始位置在中間，排列方向爲從上至下，此時能夠經過verticalDirection來改變CrossAxisAlignment的起始位置及排列方向this
-
在垂直方向的控件中（Column） ：
-
CrossAxisAlignment是水平的，默認起始位置在中間，此時能夠經過textDirection來改變CrossAxisAlignment的起始位置
-
枚舉類型
enum CrossAxisAlignment {
//將子控件放在交叉軸的起始位置
start,
//將子控件放在交叉軸的結束位置
end,
//將子控件放在交叉軸的中間位置
center,
//使子控件填滿交叉軸
stretch,
//將子控件放在交叉軸的上，而且與基線相匹配（不經常使用）
baseline,
}
複製代碼
- 例子
//例子 7 在column的基礎上設置交叉軸
Column(
mainAxisAlignment: MainAxisAlignment.start,
//todo 默認爲start 將子控件放在交叉軸的起始位置
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Box("aaaaaaa"),
Box("bbbbbbb"),
Box("ccccccc"),
Expanded(
flex: 2,
child: Text('Column crossAxisAlignment .'),
)
],
)
複製代碼
3. 在設置Column主軸的基礎上，能夠經過設置verticalDirection改變主軸的方向
// verticalDirection的默認值爲VerticalDirection.down，也就是從上至下的方向
// verticalDirection的默認值爲VerticalDirection.up，也就是從下至上的方向
複製代碼
// 例子5
Column(
mainAxisAlignment: MainAxisAlignment.start,
//todo 在設置Column主軸的基礎上，能夠經過設置verticalDirection改變主軸的方向，
// verticalDirection的默認值爲VerticalDirection.down，也就是從上至下的方向
// verticalDirection的默認值爲VerticalDirection.up，也就是從下至上的方向
verticalDirection:VerticalDirection.down,
children: <Widget>[
Box("aaaaaaa"),
Box("bbbbbbb"),
Box("ccccccc")
],
)
複製代碼
3、一個完整的例子
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ColumnPageDemo(title: 'FlexPageDemo'),
);
}
}
class ColumnPageDemo extends StatefulWidget {
ColumnPageDemo({Key key, this.title}) : super(key: key);
final String title;
@override
_ColumnPageDemoState createState() => _ColumnPageDemoState();
}
class _ColumnPageDemoState extends State<ColumnPageDemo> {
void _incrementCounter() {
setState(() {
});
}
//描述此窗口小部件表示的用戶界面部分
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
//todo 這裏有個要注意的點就是若是父控件沒有設置大小，container默認是用子控件的大小去填充父控件的大小
height:MediaQuery.of(context).size.height, //獲取屏幕的高度
width: MediaQuery.of(context).size.width,//獲取屏幕的寬度,
child:
//todo 例子1. Column，用於在垂直方向中顯示其子項。
// Column(
// children: <Widget>[
// //Expanded 用於展開Row，Column或Flex的子項的窗口小部件。
// //使用「 Expanded」小部件能夠擴展列，列或Flex的子項 以填充主軸中的可用空間（例如，水平爲列或垂直爲列）。若是擴展了多個子節點，則根據彈性因子將可用空間劃分爲多個子節點。
// Expanded(
// //構造函數 擴展（{ Key key， int flex：1， @required Widget child }）
// //@required child 爲必填參數，指要填充的子控件
// child: Text('Deliver features faster', textAlign: TextAlign.center),
//// child: Text('Deliver ', textAlign: TextAlign.center),
// //孩子最多能夠與可用空間同樣大（但容許更小）
// flex: 1,
// //鍵
// key: ValueKey("1"),
// ),
// Expanded(
// child: Text('Craft beautiful', textAlign: TextAlign.center),
// //經過還在控件去強制填充能夠用空間，會向兩邊擠壓，以適應這個子控件
// flex: 1,
// ),
// Expanded(
// flex: 2,
// child: FittedBox(
// fit: BoxFit.contain, // otherwise the logo will be tiny
// child: const FlutterLogo(),
// ),
// ),
// ],
// )
//todo 例子2 爲何個人列有黃色和黑色警告條紋？
//若是列非靈活內容（那些未包含在 Expanded或Flexible小部件中的內容）在一塊兒比列自己寬，則說該列已溢出。當列溢出時，該列沒有任何剩餘空間可在其Expanded和Flexible 子級之間共享。該列經過在溢出的邊緣上繪製黃色和黑色條紋警告框來報告此狀況。若是列外側有空間，則溢出量以紅色字體打印。
// Column(
// children: <Widget>[
// const FlutterLogo(
// size: 200,
// ),
// const Icon(
// Icons.account_circle,
// size: 300,
// color: Colors.blue,
// ),
// const Icon(
// Icons.ac_unit,
// size: 200,
// color: Colors.yellow,
// )
// ],
// )
//todo 例子3 經過Expanded 包裹自適應均分分佈
//解決方法 解決方法是將第二個子項包裝在Expanded小部件中，該小部件告訴該列應該爲該子項提供剩餘空間：
Column(
children: <Widget>[
const Expanded(
flex: 1,
child: FittedBox(
fit: BoxFit.contain,
child: const FlutterLogo(),
)
),
const Expanded(
flex: 1,
child: Icon(
Icons.account_circle,
size: 300,
color: Colors.blue,
),
),
Expanded(
flex: 1,
child: Icon(
Icons.access_time,
size: 300,
color: Colors.yellow,
),
),
],
)
//todo 例子4 MainAxisAlignment和CrossAxisAlignment詳解
//MainAxisAlignment（主軸）就是與當前控件方向一致的軸，而CrossAxisAlignment（交叉軸）就是與當前控件方向垂直的軸
//在水平方向控件中，Row
//MainAxisAlignment是水平的，默認起始位置在左邊，排列方向爲從左至右，此時能夠經過textDirection來改變MainAxisAlignment的起始位置和排列方向
//CrossAxisAlignment是垂直的，默認起始位置在中間，排列方向爲從上至下，此時能夠經過verticalDirection來改變CrossAxisAlignment的起始位置及排列方向
//在垂直方向的控件中，Column
//MainAxisAlignment是垂直的，默認起始位置在上邊，排列方向爲從上至下，此時能夠經過verticalDirection來改變MainAxisAlignment的起始位置及排列方向
//CrossAxisAlignment是水平的，默認起始位置在中間，此時能夠經過textDirection來改變CrossAxisAlignment的起始位置
// enum MainAxisAlignment {
//
// //將子控件放在主軸的開始位置
// start,
//
// //將子控件放在主軸的結束位置
// end,
//
// //將子控件放在主軸的中間位置
// center,
//
// //將主軸空白位置進列均分，排列子元素，手尾沒有空隙
// spaceBetween,
//
// //將主軸空白區域均分，使中間各個子控件間距相等，首尾子控件間距爲中間子控件間距的一半
// spaceAround,
//
// //將主軸空白區域均分，使各個子控件間距相等
// spaceEvenly,
// }
// 在設置主軸的基礎上設置 主軸的方向
// textDirection:TextDirection.rtl：從右到左
// textDirection:TextDirection.ltr：從左到右
// 例子4.1
// Row(
// mainAxisAlignment: MainAxisAlignment.start,
// //todo 在設置Row主軸的基礎上設置 改變主軸的方向
//// textDirection:TextDirection.rtl,
// children: <Widget>[
// Box("aaaaaaa"),
// Box("bbbbbbb"),
// Box("ccccccc")
// ],
// )
//// 例子4.2
// Column(
// mainAxisAlignment: MainAxisAlignment.start,
// //todo 在設置Column主軸的基礎上，能夠經過設置verticalDirection改變主軸的方向，
// // verticalDirection的默認值爲VerticalDirection.down，也就是從上至下的方向
// // verticalDirection的默認值爲VerticalDirection.up，也就是從下至上的方向
// verticalDirection:VerticalDirection.down,
// children: <Widget>[
// Box("aaaaaaa"),
// Box("bbbbbbb"),
// Box("ccccccc")
// ]
// )
// 例子5
// Column(
// mainAxisAlignment: MainAxisAlignment.start,
// //todo 在設置Column主軸的基礎上，能夠經過設置verticalDirection改變主軸的方向，
// // verticalDirection的默認值爲VerticalDirection.down，也就是從上至下的方向
// // verticalDirection的默認值爲VerticalDirection.up，也就是從下至上的方向
// verticalDirection:VerticalDirection.down,
// children: <Widget>[
// Box("aaaaaaa"),
// Box("bbbbbbb"),
// Box("ccccccc")
// ],
//
// )
//todo enum CrossAxisAlignment {
// //將子控件放在交叉軸的起始位置
// start,
//
// //將子控件放在交叉軸的結束位置
// end,
//
// //將子控件放在交叉軸的中間位置
// center,
//
////使子控件填滿交叉軸
// stretch,
//
////將子控件放在交叉軸的上，而且與基線相匹配（不經常使用）
// baseline,
// }
//例子 6 在row的基礎上設置交叉軸
// Row(
// mainAxisAlignment: MainAxisAlignment.start,
// //todo 默認爲start 將子控件放在交叉軸的起始位置
// crossAxisAlignment: CrossAxisAlignment.stretch,
// children: <Widget>[
// Box("aaaaaaa"),
// Box("bbbbbbb"),
// Box("ccccccc")
// ],
// )
//例子 7 在column的基礎上設置交叉軸
// Column(
// mainAxisAlignment: MainAxisAlignment.start,
//// //todo 默認爲start 將子控件放在交叉軸的起始位置
// crossAxisAlignment: CrossAxisAlignment.start,
// children: <Widget>[
// Box("aaaaaaa"),
// Box("bbbbbbb"),
// Box("ccccccc"),
// Expanded(
// flex: 2,
// child: Text('Column crossAxisAlignment .'),
// )
// ],
// )
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
/**
* 寫一個矩形
*/
class Box extends StatelessWidget{
String mStr="";
Box(@required String str){
this.mStr = str;
}
@override
Widget build(BuildContext context) {
return Container(
width: 80,
height: 80,
alignment: Alignment.center,
color: Colors.teal.shade300,
child: Text(mStr),
foregroundDecoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 1,
)
),
);
}
}
複製代碼
相關文章
- 1. Flutter 系列文章：Flutter Row控件介紹
- 2. Flutter 系列文章：Flutter Scaffold 控件介紹
- 3. Flutter 系列文章：Flutter SliverAppbar 控件介紹
- 4. Flutter 系列文章：Flutter FlutterLogo 控件介紹
- 5. Flutter 系列文章：Flutter TabBar 控件介紹
- 6. Flutter 系列文章：Flutter Text 控件介紹
- 7. Flutter 系列文章：Flutter PlaceHolder 控件介紹
- 8. Flutter 系列文章：Flutter Icon 控件介紹
- 9. Flutter 系列文章：Flutter Container 控件介紹
- 10. Flutter系列文章：Flutter RaisedButton控件介紹
- 更多相關文章...
- • 網站主機 介紹 - 網站主機教程
- • C# Windows 文件系統的操作 - C#教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Flutter 系列文章：Flutter Row控件介紹
- 2. Flutter 系列文章：Flutter Scaffold 控件介紹
- 3. Flutter 系列文章：Flutter SliverAppbar 控件介紹
- 4. Flutter 系列文章：Flutter FlutterLogo 控件介紹
- 5. Flutter 系列文章：Flutter TabBar 控件介紹
- 6. Flutter 系列文章：Flutter Text 控件介紹
- 7. Flutter 系列文章：Flutter PlaceHolder 控件介紹
- 8. Flutter 系列文章：Flutter Icon 控件介紹
- 9. Flutter 系列文章：Flutter Container 控件介紹
- 10. Flutter系列文章：Flutter RaisedButton控件介紹