Row與Column都是繼承的Flex彈性佈局
水平佈局，行
Row(
// 在水平方向上，子widget的對齊方式，是整體位置的偏移，靠左，居中，靠右等。只有當MainAxisSIze.max時才有意義
// mainAxisAlignment: MainAxisAlignment.start, // 如果是TextDirection.ltr則是左對齊，rtl是右對齊
mainAxisAlignment: MainAxisAlignment.center,// 居中對齊
// mainAxisAlignment: MainAxisAlignment.end, // 如果是TextDirection.ltr則是右對齊，rtl是左對齊
// mainAxisAlignment: MainAxisAlignment.spaceAround,//螢幕與子widget之間留一定空隙，子widget之間距離相等
// mainAxisAlignment: MainAxisAlignment.spaceBetween,//螢幕與子widget之間不留空隙，子widget之間距離相等
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,//螢幕與子widget之間，子widget之間距離相等
//在水平方向上，這個Row佔據的大小
mainAxisSize: MainAxisSize.max,//預設值 儘可能多佔據
// mainAxisSize: MainAxisSize.min,// 儘可能小，包裹
//在垂直方向上，子widget的對齊方式，整體偏移 ，參考verticalDirection
// crossAxisAlignment: CrossAxisAlignment.start,// VerticalDirection.down時上對齊
// crossAxisAlignment: CrossAxisAlignment.center,// 居中
// crossAxisAlignment: CrossAxisAlignment.stretch,
// crossAxisAlignment: CrossAxisAlignment.end,// 下對齊
// crossAxisAlignment: CrossAxisAlignment.baseline,
//在水平方向上，子widget的排列方向，
// textDirection: TextDirection.ltr,//從左到右
// textDirection: TextDirection.rtl,//從右到左
//垂直方向上的排列方向
// verticalDirection: VerticalDirection.up,// 從下往上
// verticalDirection: VerticalDirection.down,// 從上往下
// textBaseline: TextBaseline.alphabetic,
// textBaseline: TextBaseline.ideographic,
children: <Widget>[
// Text(" flutter good ",style: TextStyle(backgroundColor: Colors.green),),
Text(" bad rn ",style: TextStyle(backgroundColor: Colors.blue),),
// Text(" complex native ",style: TextStyle(backgroundColor: Colors.orange),),
],
),
複製程式碼#####MainAxisAlignment的各種情況
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,// 居中對齊
mainAxisSize: MainAxisSize.max,//預設值 儘可能多佔據
children: <Widget>[
// Text(" flutter good ",style: TextStyle(backgroundColor: Colors.green),),
Text(" bad rn ",style: TextStyle(backgroundColor: Colors.blue),),
// Text(" complex native ",style: TextStyle(backgroundColor: Colors.orange),),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,//
//在水平方向上，這個Row佔據的大小
mainAxisSize: MainAxisSize.max,//預設值 儘可能多佔據
children: <Widget>[
Text(" MainAxisSize.max時MainAxisAlignment各種情況 ",style: TextStyle(backgroundColor: Colors.green),),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,//
//在水平方向上，這個Row佔據的大小
mainAxisSize: MainAxisSize.max,//預設值 儘可能多佔據
children: <Widget>[
Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),),
Text(" start ",style: TextStyle(backgroundColor: Colors.blue),),
Text(" complex ",style: TextStyle(backgroundColor: Colors.orange),),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,// 居中對齊
//在水平方向上，這個Row佔據的大小
mainAxisSize: MainAxisSize.max,//預設值 儘可能多佔據
children: <Widget>[
Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),),
Text(" center ",style: TextStyle(backgroundColor: Colors.blue),),
Text(" complex ",style: TextStyle(backgroundColor: Colors.orange),),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,//
//在水平方向上，這個Row佔據的大小
mainAxisSize: MainAxisSize.max,//預設值 儘可能多佔據
children: <Widget>[
Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),),
Text(" end ",style: TextStyle(backgroundColor: Colors.blue),),
Text(" complex ",style: TextStyle(backgroundColor: Colors.orange),),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,//螢幕邊緣與widget，子widget之間，空隙等距
//在水平方向上，這個Row佔據的大小
mainAxisSize: MainAxisSize.max,//預設值 儘可能多佔據
children: <Widget>[
Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),),
Text(" spaceEvenly ",style: TextStyle(backgroundColor: Colors.blue),),
Text(" complex ",style: TextStyle(backgroundColor: Colors.orange),),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,//螢幕邊緣不留空隙，子widget之間空隙相等
//在水平方向上，這個Row佔據的大小
mainAxisSize: MainAxisSize.max,//預設值 儘可能多佔據
children: <Widget>[
Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),),
Text(" spaceBetween ",style: TextStyle(backgroundColor: Colors.blue),),
Text(" complex ",style: TextStyle(backgroundColor: Colors.orange),),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,//
//在水平方向上，這個Row佔據的大小
mainAxisSize: MainAxisSize.max,//預設值 儘可能多佔據
children: <Widget>[
Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),),
Text(" spaceAround ",style: TextStyle(backgroundColor: Colors.blue),),
Text(" complex ",style: TextStyle(backgroundColor: Colors.orange),),
],
),
],
),
),
);
}
}
複製程式碼Column
屬性與Row一樣，只是效果是在垂直方向上的