[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"), ), ), ); ```