老孟导读:Flutter中有这么一类组件,用于定位、装饰、控制子组件,比如 Container (定位、装饰)、Expanded (扩展)、SizedBox (固定尺寸)、AspectRatio (宽高比)、FractionallySizedBox (占父组件比例)。这些组件的使用频率非常高,下面一一介绍,最后给出项目中实际案例熟悉其用法。 【Flutter实战】系列文章地址:http://laomengit.com/guide/introduction/mobile_system.html

Container

Container 是最常用的组件之一,它是单容器类组件,即仅能包含一个子组件,用于装饰和定位子组件,例如设置背景颜色、形状等。

最简单的用法如下:

Container(child: Text('老孟'),)

子组件不会发生任何外观上的变化:

设置背景颜色:

Container(color: Colors.blue,child: Text('老孟'),
)

设置内边距( padding ) 和 外边距( margin )

Container(color: Colors.blue,child: Container(margin: EdgeInsets.all(10),padding: EdgeInsets.all(20),color: Colors.red,child: Text('老孟'),),)

效果如下:

decoration 属性设置子组件的背景颜色、形状等。设置背景为圆形,颜色为蓝色:

Container(child: Text('老孟,专注分享Flutter技术及应用'),decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
)

默认情况下,圆形的直径等于 Container 窄边长度,相当于在矩形内绘制内切圆。

上面的情况明显不是我们希望看到了,希望背景是圆角矩形:

Container(child: Text('老孟,专注分享Flutter技术及应用'),padding: EdgeInsets.symmetric(horizontal: 10),decoration: BoxDecoration(shape: BoxShape.rectangle,borderRadius: BorderRadius.all(Radius.circular(20)),color: Colors.blue),)

除了背景我们可以设置边框效果,代码如下:

Container(child: Text('老孟,专注分享Flutter技术及应用'),padding: EdgeInsets.symmetric(horizontal: 10),decoration: BoxDecoration(borderRadius: BorderRadius.circular(12),border: Border.all(color: Colors.blue,width: 2,),),)

创建圆角图片和圆形图片:

Container(height: 200,width: 200,decoration: BoxDecoration(image:  DecorationImage(image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),fit: BoxFit.cover,),border: Border.all(color: Colors.blue,width: 2,),borderRadius: BorderRadius.circular(12),),)

修改其形状为圆形,代码如下:

Container(height: 200,width: 200,decoration: BoxDecoration(image: DecorationImage(image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),fit: BoxFit.cover,),border: Border.all(color: Colors.blue,width: 2,),shape: BoxShape.circle,),)

设置对齐方式为居中,背景色为蓝色,代码如下:

Container(color: Colors.blue,child: Text('老孟,一个有态度的程序员'),alignment: Alignment.center,)

注意:设置对齐方式后,Container将会充满其父控件,相当于Android中 match_parent

Alignment 已经封装了常用的位置,

通过名字就知道其位置,这里要介绍一下其他的位置,比如在距离左上角1/4处:

Container(alignment: Alignment(-.5,-.5),child: Text('老孟,专注分享Flutter技术及应用'),
)

所以这里有一个非常重要的坐标系,Alignment 坐标系如下:

组件的中心为坐标原点。

设置固定的宽高属性:

Container(color: Colors.blue,child: Text('老孟,专注分享Flutter技术及应用'),alignment: Alignment.center,height: 60,width: 250,)

通过 constraints 属性设置最大/小宽、高来确定大小,如果不设置,默认最小宽高是0,最大宽高是无限大(double.infinity),约束width代码如下:

Container(color: Colors.blue,child: Text('老孟,专注分享Flutter技术及应用'),alignment: Alignment.center,constraints: BoxConstraints(maxHeight: 100,maxWidth: 300,minHeight: 100,minWidth: 100,),)

通过transform可以旋转、平移、缩放Container,旋转代码如下:

Container(color: Colors.blue,child: Text('老孟,专注分享Flutter技术及应用'),alignment: Alignment.center,height: 60,width: 250,transform: Matrix4.rotationZ(0.5),)

注意:Matrix4.rotationZ()参数的单位是弧度而不是角度

SizedBox

SizedBox 是具有固定宽高的组件,直接指定具体的宽高,用法如下:

SizedBox(height: 60,width: 200,child: Container(color: Colors.blue,alignment: Alignment.center,child: Text('老孟,专注分享Flutter技术及应用'),),)

设置尺寸无限大,如下:

SizedBox(height: double.infinity,width: double.infinity,...
)

虽然设置了无限大,子控件是否会无限长呢?不,不会,子控件依然会受到父组件的约束,会扩展到父组件的尺寸,还有一个便捷的方式设置此方式:

SizedBox.expand(child: Text('老孟,专注分享Flutter技术及应用'),
)

SizedBox 可以没有子组件,但仍然会占用空间,所以 SizedBox 非常适合控制2个组件之间的空隙,用法如下:

Column(children: <Widget>[Container(height: 30,color: Colors.blue,),SizedBox(height: 30,),Container(height: 30,color: Colors.red,),],)

AspectRatio

AspectRatio 是固定宽高比的组件,用法如下:

Container(height: 300,width: 300,color: Colors.blue,alignment: Alignment.center,child: AspectRatio(aspectRatio: 2 / 1,child: Container(color: Colors.red,),),)

aspectRatio 是宽高比,可以直接写成分数的形式,也可以写成小数的形式,但建议写成分数的形式,可读性更高。效果如下:

FractionallySizedBox

FractionallySizedBox 是一个相对父组件尺寸的组件,比如占父组件的70%:

Container(height: 200,width: 200,color: Colors.blue,child: FractionallySizedBox(widthFactor: .8,heightFactor: .3,child: Container(color: Colors.red,),),
)

通过 alignment 参数控制子组件显示的位置,默认为居中,用法如下:

FractionallySizedBox(alignment: Alignment.center,...
)

权重组件

ExpandedFlexibleSpacer 都是具有权重属性的组件,可以控制 Row、Column、Flex 的子控件如何布局的组件。

Flexible 组件可以控制 Row、Column、Flex 的子控件占满父组件,比如,Row 中有3个子组件,两边的宽是100,中间的占满剩余的空间,代码如下:

Row(children: <Widget>[Container(color: Colors.blue,height: 50,width: 100,),Flexible(child: Container(color: Colors.red,height: 50,)),Container(color: Colors.blue,height: 50,width: 100,),],)

还是有3个子组件,第一个占1/6,第二个占2/6,第三个占3/6,代码如下:

Column(children: <Widget>[Flexible(flex: 1,child: Container(color: Colors.blue,alignment: Alignment.center,child: Text('1 Flex/ 6 Total',style: TextStyle(color: Colors.white),),),),Flexible(flex: 2,child: Container(color: Colors.red,alignment: Alignment.center,child: Text('2 Flex/ 6 Total',style: TextStyle(color: Colors.white),),),),Flexible(flex: 3,child: Container(color: Colors.green,alignment: Alignment.center,child: Text('3 Flex/ 6 Total',style: TextStyle(color: Colors.white),),),),],)

子组件占比 = 当前子控件 flex / 所有子组件 flex 之和。

Flexible中 fit 参数表示填满剩余空间的方式,说明如下:

  • tight:必须(强制)填满剩余空间。
  • loose:尽可能大的填满剩余空间,但是可以不填满。

这2个看上去不是很好理解啊,什么叫尽可能大的填满剩余空间?什么时候填满?看下面的例子:

Row(children: <Widget>[Container(color: Colors.blue,height: 50,width: 100,),Flexible(child: Container(color: Colors.red,height: 50,child: Text('Container',style: TextStyle(color: Colors.white),),)),Container(color: Colors.blue,height: 50,width: 100,),],)

这段代码是在最上面代码的基础上给中间的红色Container添加了Text子控件,此时红色Container就不在充满空间,再给Container添加对齐方式,代码如下:

Row(children: <Widget>[Container(color: Colors.blue,height: 50,width: 100,),Flexible(child: Container(color: Colors.red,height: 50,alignment: Alignment.center,child: Text('Container',style: TextStyle(color: Colors.white),),)),Container(color: Colors.blue,height: 50,width: 100,),],)

此时又填满剩余空间。

大家是否还记得 Container 组件的大小是如何调整的吗?Container 默认是适配子控件大小的,但当设置对齐方式时 Container 将会填满父组件,因此是否填满剩余空间取决于子组件是否需要填满父组件。

如果把 Flexible 中子组件由 Container 改为 OutlineButton,代码如下:

Row(children: <Widget>[Container(color: Colors.blue,height: 50,width: 100,),Flexible(child: OutlineButton(child: Text('OutlineButton'),),),Container(color: Colors.blue,height: 50,width: 100,),],)

OutlineButton 正常情况下是不充满父组件的,因此最终的效果应该是不填满剩余空间:

下面再来介绍另一个权重组件 Expanded ,源代码如下:

class Expanded extends Flexible {/// Creates a widget that expands a child of a [Row], [Column], or [Flex]/// so that the child fills the available space along the flex widget's/// main axis.const Expanded({Key key,int flex = 1,@required Widget child,}) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
}

Expanded 继承字 Flexible,fit 参数固定为 FlexFit.tight,也就是说 Expanded 必须(强制)填满剩余空间。上面的 OutlineButton 想要充满剩余空间可以直接使用 Expanded :

Row(children: <Widget>[Container(color: Colors.blue,height: 50,width: 100,),Expanded(child: OutlineButton(child: Text('OutlineButton'),),),Container(color: Colors.blue,height: 50,width: 100,),],)

Spacer 也是一个权重组件,源代码如下:

@override
Widget build(BuildContext context) {return Expanded(flex: flex,child: const SizedBox.shrink(),);
}

Spacer 的本质也是 Expanded 的实现的,和Expanded的区别是:Expanded 可以设置子控件,而 Spacer 的子控件尺寸是0,因此Spacer适用于撑开 Row、Column、Flex 的子控件的空隙,用法如下:

Row(children: <Widget>[Container(width: 100,height: 50,color: Colors.green,),Spacer(flex: 2,),Container(width: 100,height: 50,color: Colors.blue,),Spacer(),Container(width: 100,height: 50,color: Colors.red,),],
)

三个权重组建总结如下

  • Spacer 是通过 Expanded 实现的,Expanded继承自Flexible。
  • 填满剩余空间直接使用Expanded更方便。
  • Spacer 用于撑开 Row、Column、Flex 的子组件的空隙。

仿 掘金-我 效果

先看下效果:

拿到效果图先不要慌 (取出手机拍照发个朋友圈

【Flutter实战】定位装饰权重组件及柱状图案例相关推荐

  1. 【Flutter实战】六大布局组件及半圆菜单案例

    老孟导读:Flutter中布局组件有水平 / 垂直布局组件( Row 和 Column ).叠加布局组件( Stack 和 IndexedStack ).流式布局组件( Wrap )和 自定义布局组件 ...

  2. Flutter实战之go_router路由组件入门指南

    go_router入门指南 1.go_router是什么 2.go_router的初始化和嵌套(子)路由 3.非嵌套路由的常规使用 4.路由传递参数 5.其他路由组件 1.go_router是什么 g ...

  3. 【Flutter实战】图片组件及四大案例

    老孟导读:大家好,这是[Flutter实战]系列文章的第三篇,这一篇讲解图片组件,Image有很多高级用法,希望对您有所帮助. 图片组件是Flutter基础组件之一,和文本组件一样必不可少.图片组件包 ...

  4. flutter 图解_Flutter自绘组件:微信悬浮窗(三)

    前期指路: Flutter自绘组件:微信悬浮窗(一) Flutter自绘组件:微信悬浮窗(二) 上两讲中讲解了微信悬浮窗按钮形态的实现,在本章中讲解如何实现悬浮窗列表形态.废话不多说,先上效果对比图. ...

  5. fastreport文本字数太多换行_Flutter实战】文本组件及五大案例

    老孟导读:大家好,这是[Flutter实战]系列文章的第二篇,这一篇讲解文本组件,文本组件包括文本展示组件(Text和RichText)和文本输入组件(TextField),基础用法和五个案例助你快速 ...

  6. 读书笔记——Flutter实战

    第一章 起步 1.2:初识Flutter 静态编译与动态解释:静态编译的程序在执行前全部被翻译为机器码,通常将这种类型称为AOT (Ahead of time)即 "提前编译":而 ...

  7. 【Flutter】Banner 轮播组件 ( flutter_swiper 插件 | Swiper 组件 )

    文章目录 一.flutter_swiper 插件 二.Swiper 组件使用 三.完整代码示例 四.相关资源 一.flutter_swiper 插件 到 https://pub.dev/package ...

  8. 【Flutter实战】移动技术发展史

    老孟导读:大家好,这是[Flutter实战]系列文章的第一篇,这并不是一篇Flutter技术文章,而是介绍智能手机操作系统.跨平台技术的演进以及我对各种跨平台技术看法的文章. 智能手机操作系统 塞班( ...

  9. 【Flutter 实战】简约而不简单的计算器

    老孟导读:这是 [Flutter 实战]组件系列文章的最后一篇,其他组件地址:http://laomengit.com/guide/widgets/Text.html,接下来将会讲解动画系列,关注老孟 ...

最新文章

  1. 更好的内存管理-jemalloc (redis 默认使用的)
  2. Tungsten Fabric SDN — Service Chain — 高级特性
  3. 数据中心发电机、变压器和UPS匹配的逻辑探讨
  4. DWZ与百度编辑器的IE8以下上传图片兼容问题
  5. 微服务架构---服务降级
  6. 探秘盒马机器人餐厅:老外目瞪口呆,90岁奶奶狂点赞
  7. CentOS安装运行NodeJS框架Express
  8. linux 标准vruntime,linux – CFS中vruntime的概念是什么
  9. 5.10地址信息函数
  10. Java continue的关键字
  11. (ORBSLAM3关联文章)论文翻译Inertial-Only Optimization for Visual-Inertial Initialization视觉惯性初始化的仅惯性优化
  12. 一元一次方程用计算机怎么解,一元一次方程怎么解 [解一元一次方程的基本步骤]...
  13. linux限制进程带宽,再Linux系统中限制网络带宽使用的教程
  14. SiriKit测试全攻略
  15. 有卡却显示无服务器,为什么卡一直显示无服务
  16. Android第三方SDK集成 —— 极光推送
  17. vue 禁止input输入框输入特殊字符和汉字
  18. FFplay退出分析
  19. POJ 3179Corral the Cows(离散化+二分)
  20. 被忽视的最美花瓶、白雪公主Lily Collis终于翻红了!

热门文章

  1. HCSR04超声波传感器驱动
  2. JZOJ 1307 Jail
  3. 亲测有效解决:excel把CSV数字转化成了日期导致数据处理出问题
  4. java properties文件 变量_properties文件和环境变量
  5. 原创|干货|长文|264亿件包裹怎么破?闪电式自动化分拣技术 细节大起底!
  6. in-pet流浪动物远程救助领养平台
  7. linux进程间通信(IPC) ---无名管道
  8. Java 运算符中 前++ 和后++ 的区别详解
  9. 【Python】Python提取word表格,并保存在excel中
  10. duobango-tinySDP,rfc 2327