## Padding组件 Flutter中很多Widget是没有padding属性的，这个时候可以用Padding组件处理容器与子元素直接的间距。 ### 属性 * padding：EdgeInsets设置 * child： 子组件 ~~~ Container( padding: EdgeInsets.fromLTRB(0, 0, 10, 0), child: GridView.count( crossAxisCount: 2, childAspectRatio: 1.7, children: <Widget>[ Padding( padding: EdgeInsets.fromLTRB(10, 10, 0, 0), child: Image.network( 'https://www.itying.com/images/flutter/1.png', fit: BoxFit.cover, ), ), Padding( padding: EdgeInsets.fromLTRB(10, 10, 0, 0), child: Image.network( 'https://www.itying.com/images/flutter/2.png', fit: BoxFit.cover, ), ), Padding( padding: EdgeInsets.fromLTRB(10, 10, 0, 0), child: Image.network( 'https://www.itying.com/images/flutter/3.png', fit: BoxFit.cover, ), ), Padding( padding: EdgeInsets.fromLTRB(10, 10, 0, 0), child: Image.network( 'https://www.itying.com/images/flutter/4.png', fit: BoxFit.cover, ), ), ], ), ); } ~~~ ## 图标组件，组件传参，默认参数 ~~~ @override Widget build(BuildContext context) { // TODO: implement build return IconContainer(Icons.home,color:Colors.red); } class IconContainer extends StatelessWidget{ double size; Color color; IconData icon; IconContainer(this.icon, {this.color= Colors.black, this.size = 32.0}); @override Widget build(BuildContext context) { print(this.color); return Container( height: 100.0, width: 100.0, color: this.color, child: Center( child: Icon(this.icon, size: this.size,color:Colors.white), ), ); } } ~~~ ## Row水平布局组件 * mainAxisAlignment 主轴的排序方式 * crossAxisAlignment 次轴的排序方式 * children 组件子元素 ~~~ Container( width: 400.0, height: 500.0, color: Colors.black87, child: Row( //start end center spaceAround spaceBetween spaceEvenly mainAxisAlignment: MainAxisAlignment.spaceBetween, //crossAxisAlignment 是相对于外层来说的,用的比较少 // start center end stretch crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ IconContainer(Icons.home,color:Colors.red), IconContainer(Icons.search,color:Colors.blue), IconContainer(Icons.settings,color:Colors.pink), ], ), ); ~~~ ## Column垂直布局组件 * mainAxisAliment 主轴的排序方式 * crossAxisAlignment 次轴的排序方式 * children ~~~ Container( width: 400.0, height: 500.0, color: Colors.black87, child: Column( // 主轴start end center spaceAround spaceBetween spaceEvenly mainAxisAlignment: MainAxisAlignment.end, // 次轴crossAxisAlignment 是相对于外层来说的,用的比较少 // start center end stretch crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ IconContainer(Icons.home,color:Colors.red), IconContainer(Icons.search,color:Colors.blue), IconContainer(Icons.settings,color:Colors.pink), ], ), ); ~~~ ## Flutter Expanded类似Web中的Flex布局 Expanded可以用在Row和Column布局中 * flex 元素占整个父Row/Column的比例 * child 子元素 ~~~ Row( // 主轴start end center spaceAround spaceBetween spaceEvenly mainAxisAlignment: MainAxisAlignment.start, // 次轴crossAxisAlignment 是相对于外层来说的,用的比较少 // start center end stretch crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Expanded( flex:1, //此时IconContainer里面的宽度就没有效果了 child: IconContainer(Icons.home,color:Colors.red), ), Expanded( flex:2, child: IconContainer(Icons.search,color:Colors.blue), ), Expanded( flex:1, child: IconContainer(Icons.search,color:Colors.red), ), ], ) ~~~ 左侧固定，右侧自适应 ~~~ Row( // 主轴start end center spaceAround spaceBetween spaceEvenly mainAxisAlignment: MainAxisAlignment.start, // 次轴crossAxisAlignment 是相对于外层来说的,用的比较少 // start center end stretch crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ IconContainer(Icons.home,color:Colors.red), Expanded( flex:1, child: IconContainer(Icons.search,color:Colors.blue), ), ], ); ~~~ ## 例子  ~~~ Column( children: <Widget>[ Row( children: <Widget>[ // Expanded 自动扩展 Expanded( child: Container( height: 200.0, color: Colors.black, child: Text("Hello Flutter"), ), ), ], ), // SizedBox常用来做间距 SizedBox(height: 10.0,), Row( children: <Widget>[ // 左右布局 使用Expanded Expanded( flex:2, child: Container( height: 180, child: Image.network("https://www.itying.com/images/flutter/1.png",fit:BoxFit.cover) ), ), SizedBox(width: 10), Expanded( flex:1, child: Container( height: 180, // ListView 里面的元素会自适应 child:ListView( children: <Widget>[ Container( height: 85, child: Image.network("https://www.itying.com/images/flutter/2.png",fit:BoxFit.cover), ), SizedBox(height: 10,), Container( height: 85, child: Image.network("https://www.itying.com/images/flutter/3.png",fit:BoxFit.cover), ), ], ), ), ), ], ) ], ) ~~~