Flutter中Padding、Row 、Column 、Expanded 组件详解
Flutter中Padding、Row 、Column 、Expanded 组件详解
越陌度阡
发布于 2022-05-06 14:56:58
发布于 2022-05-06 14:56:58
文章被收录于专栏：大前端（横向跨端 & 纵向全栈）
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{
@override
Widget 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{
@override
Widget 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{
@override
Widget 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{
@override
Widget build(BuildContext context) {
return Container(
// 宽度
width:500,
// 高度
height:500,
// 背景颜色
color:Colors.red,
// 水平布局组件
child: Row(
// 定义水平对齐的方式，类似于CSS里的flex-decration
mainAxisAlignment: 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});
@override
Widget 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{
@override
Widget 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{
@override
Widget build(BuildContext context) {
return Container(
// 宽度
width:500,
// 高度
height:500,
// 背景颜色
color:Colors.red,
// 垂直布局组件
child: Column(
// 定义垂直对齐的方式，类似于CSS里的flex-decration
mainAxisAlignment: 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{
@override
Widget 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{
@override
Widget 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});
@override
Widget 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{
@override
Widget 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{
@override
Widget 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});
@override
Widget 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{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
// 导航条
appBar:AppBar(title:Text('Flutter App')),
// 主体
body:HomeContent(),
),
// 主题
theme: ThemeData(primarySwatch:Colors.yellow),
);
}
}
// 布局实例
class HomeContent extends StatelessWidget{
@override
Widget 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)
)
],
)
)
)
],
)
],
);
}
}本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-12-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
容器服务
腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。
腾讯云开发者
