Flutter中Padding、Row 、Column 、Expanded 组件详解

1. Paddiing 组件

在 html 中常见的布局标签都可以使用 padding 属性，但是 Flutter 中很多 Widget 是没有 padding 属性，这个时候我们可以用 Padding 组件处理容器与子元素直接的间距。

常见属性：

1. padding 内边距值；

2. child 子组件；

代码示例：

import 'package:flutter/material.dart';void main(){runApp(MyApp());
}
// 抽离成一个单独的组件
class MyApp extends StatelessWidget{@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(// 导航条appBar:AppBar(title:Text('Flutter App')),// 主体body:HomeContent(),),theme: ThemeData(primarySwatch:Colors.yellow),);}
}// Padding内边距的使用
class HomeContent extends StatelessWidget{@overrideWidget build(BuildContext context) {return  Padding(// 给整个容器右边添加内边距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("http://www.itying.com/images/flutter/1.png",fit: BoxFit.cover)),Padding(padding: EdgeInsets.fromLTRB(10, 10, 0, 0),child: Image.network("http://www.itying.com/images/flutter/2.png",fit: BoxFit.cover)),Padding(padding: EdgeInsets.fromLTRB(10, 10, 0, 0),child: Image.network("http://www.itying.com/images/flutter/3.png",fit: BoxFit.cover)),Padding(padding: EdgeInsets.fromLTRB(10, 10, 0, 0),child: Image.network("http://www.itying.com/images/flutter/4.png",fit: BoxFit.cover)),Padding(padding: EdgeInsets.fromLTRB(10, 10, 0, 0),child: Image.network("http://www.itying.com/images/flutter/3.png",fit: BoxFit.cover)),Padding(padding: EdgeInsets.fromLTRB(10, 10, 0, 0),child: Image.network("http://www.itying.com/images/flutter/2.png",fit: BoxFit.cover)),Padding(padding: EdgeInsets.fromLTRB(10, 10, 0, 0),child: Image.network("http://www.itying.com/images/flutter/1.png",fit: BoxFit.cover)),Padding(padding: EdgeInsets.fromLTRB(10, 10, 0, 0),child: Image.network("http://www.itying.com/images/flutter/4.png",fit: BoxFit.cover))],));}
}

效果图如下：

需要注意的是，以上图片的间隙由内外两层内边距组合使用而得出来的。

2. Row 组件

Row 组件主要用于需要水平布局的情况。

常见属性：

1. mainAxisAlignment 主轴的组件对齐方式；

2. crossAxisAlignment 次轴的组件对齐方式；

3. children 组件子元素；

代码示例：

import 'package:flutter/material.dart';void main(){runApp(MyApp());
}
// 抽离成一个单独的组件
class MyApp extends StatelessWidget{@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(// 导航条appBar:AppBar(title:Text('Flutter App')),// 主体body:HomeContent(),),theme: ThemeData(primarySwatch:Colors.yellow),);}
}
// Row水平布局组件的使用
class HomeContent extends StatelessWidget{@overrideWidget build(BuildContext context) {return Container(// 宽度width:500,// 高度height:500,// 背景颜色color:Colors.red,// 水平布局组件child: Row(// 定义水平对齐的方式，类似于CSS里的flex-decrationmainAxisAlignment: MainAxisAlignment.spaceEvenly,// 定义元素相对父容器的垂直对齐方式crossAxisAlignment: CrossAxisAlignment.center,// 子元素children: <Widget>[// 调用自定义的图标组件传参IconContainer(Icons.search,color:Colors.black,size:40.0),IconContainer(Icons.home,color:Colors.green,size:40.0),IconContainer(Icons.select_all,color:Colors.blue,size:40.0)],));}
}// 定义传入图标的类
class IconContainer extends StatelessWidget{double size = 32.0;Color color = Colors.red;IconData icon;// 构造函数IconContainer(this.icon,{this.color,this.size});@overrideWidget build(BuildContext context) {return Container(// 宽度height:100.0,// 高度width:100.0,// 背景颜色color:this.color,// 子元素child:Center(child: Icon(this.icon,size:this.size,color:Colors.white)));}
}

效果图如下：

3. Column组件

Column 组件主要用于需要垂直布局的情况。

常见属性：

1. mainAxisAlignment 主轴的组件对齐方式；

2. crossAxisAlignment 次轴的组件对齐方式；

3. children 组件子元素；

代码示例：

import 'package:flutter/material.dart';void main(){runApp(MyApp());
}
// 抽离成一个单独的组件
class MyApp extends StatelessWidget{@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(// 导航条appBar:AppBar(title:Text('Flutter App')),// 主体body:HomeContent(),),// 主题theme: ThemeData(primarySwatch:Colors.yellow),);}
}// Column垂直布局组件的使用
class HomeContent extends StatelessWidget{@overrideWidget build(BuildContext context) {return Container(// 宽度width:500,// 高度height:500,// 背景颜色color:Colors.red,// 垂直布局组件child: Column(// 定义垂直对齐的方式，类似于CSS里的flex-decrationmainAxisAlignment: MainAxisAlignment.spaceEvenly,// 定义元素相对父容器的水平对齐方式crossAxisAlignment: CrossAxisAlignment.center,// 子元素children: <Widget>[// 调用自定义的图标组件传参IconContainer(Icons.search,color:Colors.black,size:40.0),IconContainer(Icons.home,color:Colors.green,size:40.0),IconContainer(Icons.select_all,color:Colors.blue,size:40.0)],));}
}

效果图如下：

4. Expanded组件

Expanded 类似 Web 开发中的Flex布局，可以用在 Row 和 Column 布局中以定义该子组件所占的百分比。

常见属性：

1. flex 子组件占整个父组件比例；

2. child 子组件；

代码示例：

import 'package:flutter/material.dart';void main(){runApp(MyApp());
}
// 抽离成一个单独的组件
class MyApp extends StatelessWidget{@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(// 导航条appBar:AppBar(title:Text('Flutter App')),// 主体body:HomeContent(),),// 主题theme: ThemeData(primarySwatch:Colors.yellow),);}
}// Expanded组件的使用，定义一行中每个元素的百分比
class HomeContent extends StatelessWidget{@overrideWidget build(BuildContext context) {return  Row(// 子元素children: <Widget>[Expanded(flex:1,child:IconContainer(Icons.search,color:Colors.red,size:40.0),), Expanded(flex:2,child:IconContainer(Icons.home,color:Colors.black,size:40.0),),Expanded(flex:1,child:IconContainer(Icons.select_all,color:Colors.green,size:40.0),),],);}
}// 定义传入图标的类
class IconContainer extends StatelessWidget{double size = 32.0;Color color = Colors.red;IconData icon;// 构造函数IconContainer(this.icon,{this.color,this.size});@overrideWidget build(BuildContext context) {return Container(// 宽度height:100.0,// 高度width:100.0,// 背景颜色color:this.color,// 子元素child:Center(child: Icon(this.icon,size:this.size,color:Colors.white)));}
}

效果图如下：

利用Expanded实现一个左侧固定，右侧自适应的布局。

import 'package:flutter/material.dart';void main(){runApp(MyApp());
}
// 抽离成一个单独的组件
class MyApp extends StatelessWidget{@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(// 导航条appBar:AppBar(title:Text('Flutter App')),// 主体body:HomeContent(),),// 主题theme: ThemeData(primarySwatch:Colors.yellow),);}
}
// Expanded组件实现左侧固定宽度，右侧自适应的布局
class HomeContent extends StatelessWidget{@overrideWidget build(BuildContext context) {return  Row(// 子元素children: <Widget>[// 左侧组件固定宽度IconContainer(Icons.search,color:Colors.red,size:40.0),// 右侧组件自适应Expanded(// 自适应时值为1即可flex:1,child:IconContainer(Icons.select_all,color:Colors.green,size:40.0),),],);}
}// 定义传入图标的类
class IconContainer extends StatelessWidget{double size = 32.0;Color color = Colors.red;IconData icon;// 构造函数IconContainer(this.icon,{this.color,this.size});@overrideWidget build(BuildContext context) {return Container(// 宽度height:100.0,// 高度width:100.0,// 背景颜色color:this.color,// 子元素child:Center(child: Icon(this.icon,size:this.size,color:Colors.white)));}
}

效果图如下：

5. 布局实例

实现下图的布局：

代码如下：

import 'package:flutter/material.dart';void main(){runApp(MyApp());
}
// 抽离成一个单独的组件
class MyApp extends StatelessWidget{@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(// 导航条appBar:AppBar(title:Text('Flutter App')),// 主体body:HomeContent(),),// 主题theme: ThemeData(primarySwatch:Colors.yellow),);}
}// 布局实例
class HomeContent extends StatelessWidget{@overrideWidget build(BuildContext context) {return Column(children: <Widget>[Row(children: <Widget>[Expanded(child:Container(height:180,color:Colors.black,child: Text('你好，Flutter'),),)],),SizedBox(height:10),Row(children: <Widget>[Expanded(flex: 2,child:Container(height:180,child:Image.network("http://www.itying.com/images/flutter/1.png",fit:BoxFit.cover)) ),SizedBox(width:10),Expanded(flex:1,child:Container(height:180,child:ListView(children: <Widget>[Container(height:85,child:Image.network("http://www.itying.com/images/flutter/1.png",fit:BoxFit.cover)),SizedBox(height:10),Container(height:85,child:Image.network("http://www.itying.com/images/flutter/2.png",fit:BoxFit.cover))], )))],)],);}
}