iT邦幫忙

0

Flutter Widget - Container

Container就只是個容器,只能有一個child;會跟 Row 或Column搭配使用。
Row及Column裡可以放很多個children: []

new Container(
child:Widget 

width:double ,寬度
height:double ,高度

color:背景色
Color(0xFF42A5F5)
Color.fromARGB(255, 66, 165, 245)
Color.fromRGBO(66, 165, 245, 1.0)

alignment:對位
Alignment.bottomCenter,Alignment(0.0, 1.0)
Alignment.bottomLeft ,Alignment(-1.0, 1.0)
Alignment.bottomRight,Alignment(1.0, 1.0)
Alignment.center,Alignment(0.0, 0.0)
Alignment.centerLeft,Alignment(-1.0, 0.0)
Alignment.centerRight,Alignment(1.0, 0.0)
Alignment.topCenter,Alignment(0.0, -1.0)
Alignment.topLeft ,Alignment(-1.0, -1.0)
Alignment.topRight ,Alignment(1.0, -1.0) 

padding:
EdgeInsets.only(top: 20.0,left: 20.0,right: 20.0,bottom: 0.0)
EdgeInsets.all(8.0),
EdgeInsets.symmetric(vertical: 8.0)//對稱

margin:
EdgeInsets.only(top: 20.0,left: 20.0,right: 20.0,bottom: 0.0)
EdgeInsets.all(8.0),

decoration:Decoration,文章底有相關說明
foregroundDecoration:Decoration ,文章底有相關說明
constraints:BoxConstraints ,文章底有相關說明

transform:
Matrix4.rotationZ(0.1)
Matrix4.translationValues(double x, double y, double z),
Matrix4.skewX(double alpha)...


)

BoxConstraints繼承Decoration所以decoration,foregroundDecoration及constraints都可以用BoxConstraints詳細內容BoxConstraints

Row

new Row(
  children: <Widget>[],
  crossAxisAlignment:垂直對齊方式
  CrossAxisAlignment.baseline 
  CrossAxisAlignment.start  
  CrossAxisAlignment.center 
  CrossAxisAlignment.end
  CrossAxisAlignment.stretch,

  
   
  direction → Axis,
  
  mainAxisAlignment:水平對齊方式
  MainAxisAlignment.start 
  MainAxisAlignment.center 
  MainAxisAlignment.end  
  MainAxisAlignment.spaceAround  
  MainAxisAlignment.spaceBetween  
  MainAxisAlignment.spaceEvenly,
  
  mainAxisSize → MainAxisSize,
  textBaseline → TextBaseline,
  textDirection → TextDirection,
  verticalDirection → VerticalDirection
)

Column

new Column(
  children: <Widget>[],
  crossAxisAlignment,
  direction → Axis,
  mainAxisAlignment → MainAxisAlignment,
  mainAxisSize → MainAxisSize,
  textBaseline → TextBaseline,
  textDirection → TextDirection,
  verticalDirection → VerticalDirection
)

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言