[Flutter]佈局

Container

• child：可以設定一個子元件

Container(child:Text('child'));

• color：背景顏色

Container(color: Color.fromARGB(255, 255, 255, 255));

• alignment：對齊方式

Container(
  alignment:Alignment.center,
  child: Text('alignment'),
  color: Color.fromARGB(255, 255, 255, 255),
);

• constraints: 最大高度、最大寬度、最小高度、最小寬度

Container(
  alignment: Alignment.center,
  child: Text('constraints'),
  color: Color.fromARGB(255, 255, 255, 255),
  constraints: BoxConstraints(maxWidth: 300, maxHeight: 300, minWidth: 250, minHeight: 50),
);

• margin: 外部間距

Center(
  child: Container(
    alignment: Alignment.center,
    child: Text('margin'),
    color: Color.fromARGB(255, 255, 255, 255),
    margin: EdgeInsets.only(left: 100,top: 50,right: 100,bottom: 50),
));

• padding: 內部間距

Center(
  child: Container(
    child: Text('padding'),
    color: Color.fromARGB(255, 255, 255, 255),
    padding: EdgeInsets.only(left: 5,top: 10,right: 5,bottom: 10),
));

Row

Row(
  children: <Widget>[Text('123,'), Text('456')],
);

mainAxisAlignment

• start：靠左對其。
• end：靠右對齊。
• center：置中。
• spaceBetween：中間留空間。
• spaceAround：兩邊空間均分。
• spaceEvenly：均分空間。

crossAxisAlignment

• start：縱向起點。
• end：縱向終點。
• center：縱向中心點。
• stretch：佔滿縱向。
• baseline：縱向對齊 baseline。

Column

Column(
  children: <Widget>[Text('123,'), Text('456')],
);

mainAxisAlignment

• start：起點。
• end：縱向終點。
• center：縱向中心點。
• spaceBetween：中間留空間。
• spaceAround：兩邊空間均分。
• spaceEvenly：均分空間。

crossAxisAlignment

• start：靠左對齊。
• end：靠右對齊。
• center：置中。
• stretch：佔滿橫向。
• baseline：橫向對齊 baseline。

Stack

可以將兩個以上的元件堆疊起來。

屬性

• alignment: 對齊
• Positioned：位置