[TOC] ## 布局 ### Container 類似于div , 可以添加padding、margin、border、background color、 boxShadow、**通常用于裝飾其他Widget** ``` key Container唯一標識符，用于查找更新。 alignment 控制child的對齊方式，如果container或者container父節點尺寸大于child的尺寸，這個屬性設置會起作用，有很多種對齊方式。 padding decoration內部的空白區域，如果有child的話，child位于padding內部。padding與margin的不同之處在于，padding是包含在content內，而margin則是外部邊界，設置點擊事件的話，padding區域會響應，而margin區域不會響應。 color 用來設置container背景色，如果foregroundDecoration設置的話，可能會遮蓋color效果。 decoration 繪制在child后面的裝飾，設置了decoration的話，就不能設置color屬性，否則會報錯，此時應該在decoration中進行顏色的設置。 foregroundDecoration 繪制在child前面的裝飾。 width container的寬度，設置為double.infinity可以強制在寬度上撐滿，不設置，則根據child和父節點兩者一起布局。 height container的高度，設置為double.infinity可以強制在高度上撐滿。 constraints 添加到child上額外的約束條件。 margin 圍繞在decoration和child之外的空白區域，不屬于內容區域。 transform 設置container的變換矩陣，類型為Matrix4。 child container中的內容widget。 ``` ``` child: new Container( padding: const EdgeInsets.all(10.0), width: 10.0, height: 10.0, /*裝飾*/ decoration: new BoxDecoration( border:Border.all(width:12.0,color:Colors.red), //border width:邊寬 color:顏色 borderRadius: BorderRadius.all(const Radius.circular(10.0)), // border圓角 boxShadow: <BoxShadow>[ // 陰影 new BoxShadow( color: Color(0X2A3B2C), offset: Offset(0, 30), blurRadius: 80, ), ] ), child: new Column( ), ```  ### Row、Column 其實就是flex布局中的flex-direction 一般 配合 `Container > Column > Row` ``` class Home extends StatelessWidget { @override Widget build(BuildContext context) { return Material( child: new Container( child: new Column( children: <Widget>[ new Row( children: <Widget>[ new Text("hello"), new Text("word"), ], ), new Row( children: <Widget>[ new Text("hello1"), new Text("word2"), ], ) ], ), ), ); } } ``` ### Flex Flutter 中的彈性布局主要通過`Flex`和`Expanded`來配合實現 `Flex`組件可以沿著水平或垂直方向排列子組件，如果你知道主軸方向，使用`Row`或`Column`會方便一些，**因為`Row`和`Column`都繼承自`Flex`** ``` bool isHandset = MediaQuery.of(context).size.width < 600; return Flex( children: [Text("Foo"), Text("Bar"), Text("Baz")], direction: isHandset ? Axis.vertical : Axis.horizontal); ``` ### GridView web中display：grid ``` new GridView.count( primary: false, padding: const EdgeInsets.all(20.0), crossAxisSpacing: 10.0, crossAxisCount: 3, children: <Widget>[ const Text('He\'d have you all unravel at the'), const Text('Heed not the rabble'), const Text('Sound of screams but the'), const Text('Who scream'), const Text('Revolution is coming...'), const Text('Revolution, they...'), ], ) ``` ### ListView ``` child: CustomScrollView( shrinkWrap: true, slivers: <Widget>[ SliverPadding( padding: const EdgeInsets.all(20.0), sliver: SliverList( delegate: SliverChildListDelegate( <Widget>[ const Text('I\'m dedicating every day to you'), const Text('Domestic life was never quite my style'), const Text('When you smile, you knock me out, I fall apart'), const Text('And I thought I was so smart'), ], ), ), ), ], ) ``` ### Card 卡片效果 ``` return Center( child: Card( child: InkWell( splashColor: Colors.red.withAlpha(30),//鼠標按壓時候的顏色 onTap: () { print('Card tapped.'); // 點擊操作 }, onDoubleTap: () { print('Card tapped2.'); // 點擊操作 }, child: Container( width: 300, height: 100, child: Text('A card that can be tapped1'), ), ), ), ); ```  ### Expanded 它會填充尚未被其他子項占用的的剩余可用空間。Expanded可以擁有多個children。然后使用flex參數來確定他們占用剩余空間的比例。更多細節可以參看：flutter控件Flexible和 Expanded的區別 ### FittedBox 縮放和位置調整 ``` new Container( padding: const EdgeInsets.only(top: 60.0), color: Colors.amberAccent, width: 300.0, height: 300.0, child: new FittedBox( fit: BoxFit.contain, // child 縮放 alignment: Alignment.bottomLeft, // child 位置 child: new Container( color: Colors.red, child: new Text("FittedBox"), ), ), ); ```