详解flutter中常用的container layout实例
作者:flydean 发布时间:2022-07-25 07:49:53
简介
在上一篇文章中,我们列举了flutter中的所有layout类,并且详细介绍了两个非常常用的layout:Row和Column。
掌握了上面两个基本的layout还是不够的,如果需要应付日常的layout使用,我们还需要掌握多一些layout组件。今天我们会介绍一个功能强大的layout:Container layout。
Container的使用
Container是一个空白的容器,通常可以用Container来封装其他的widget。那么为什么还需要把widget封装在Container中呢?这是因为Container中包含了一些特殊的功能。
比如Container中可以设置背景颜色或者背景图片,并且可以设置padding, margins和borders。这就为组件的自定义提供了诸多空间。
首先看一下Container的定义和构造函数:
class Container extends StatelessWidget {
Container({
Key? key,
this.alignment,
this.padding,
this.color,
this.decoration,
this.foregroundDecoration,
double? width,
double? height,
BoxConstraints? constraints,
this.margin,
this.transform,
this.transformAlignment,
this.child,
this.clipBehavior = Clip.none,
})
可以看到Container是一个StatelessWidget,它的构造函数可以传入多个非常有用的属性,用来控制Container的表现。
Container中有padding,decoration,constraints和margin这些和位置相关的一些属性,他们有什么关系呢?
container首先将child用padding包裹起来,padding可以用decoration进行填充。
填充后的padding又可以应用constraints来进行限制(比如width和height),然后这个组件又可以使用margin空白包裹起来。
接下来我们看一个简单的Container中包含Column和Row的例子。
首先构造一个container widget,它包含一个Column:
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
color: Colors.white,
),
child: Column(
children: [
buildBoxRow(),
buildBoxRow(),
],
),
);
}
这里给Container设置了一个BoxDecoration,用于指定Container的背景颜色。
在Child中给定了一个Column widget,它的child是一个Row对象。
Widget buildBoxRow() => Row(
textDirection: TextDirection.ltr,
children: [
Container(
width: 100,
child: Image.asset("images/head.jpg")
)
],
);
这里的Row中又是一个包含了Image的Container对象。
最后运行,我们可以得到下面的界面:
Container中包含两行,每行包含一个Image对象。
旋转Container
默认情况下Container是一个正常布局的widget,但是有时候我们可能需要实现一些特殊效果,比如说组件的旋转,Container提供的transform属性可以很方便的做到这一点。
对于Container来说,transform是在组件绘制中最先被应用的,transform之后会进行decoration的绘制,然后进行child的绘制,最后进行foregroundDecoration的绘制。
还是上面的例子,我们试一下transform属性是如何工作的,我们在包含image的container中加入transform属性:
Widget buildBoxRow() => Row(
textDirection: TextDirection.ltr,
children: [
Container(
transform: Matrix4.rotationZ(0.2),
width: 100,
child: Image.asset("images/head.jpg")
)
],
);
最后生成的APP如下:
可以看到图片已经沿Z轴进行了旋转。
这里的旋转使用的是Matrix4.rotationZ,也就是沿Z轴选择,当然你可以可以使用rotationX或者rotationY,分别沿X轴或者Y轴旋转。
如果选择rotationX,那么看起来的图像应该是这样的:
事实上,Matrix4不仅仅可以沿单独的轴进行旋转,还可以选择特定的向量方向进行选择。
比如下面的两个方法:
/// Translation matrix.
factory Matrix4.translation(Vector3 translation) => Matrix4.zero()
..setIdentity()
..setTranslation(translation);
/// Translation matrix.
factory Matrix4.translationValues(double x, double y, double z) =>
Matrix4.zero()
..setIdentity()
..setTranslationRaw(x, y, z);
Matrix4还可以沿三个方向进行进行放大缩写,如下面的方法:
/// Scale matrix.
factory Matrix4.diagonal3Values(double x, double y, double z) =>
Matrix4.zero()
.._m4storage[15] = 1.0
.._m4storage[10] = z
.._m4storage[5] = y
.._m4storage[0] = x;
感兴趣的朋友可以自行尝试。
Container中的BoxConstraints
在Container中设置Constraints的时候,我们使用的是BoxConstraints。BoxConstraints有四个包含数字的属性,分别是minWidth,maxWidth,minHeight和maxHeight。
所以BoxConstraints提供了这四个值的构造函数:
const BoxConstraints({
this.minWidth = 0.0,
this.maxWidth = double.infinity,
this.minHeight = 0.0,
this.maxHeight = double.infinity,
}) : assert(minWidth != null),
assert(maxWidth != null),
assert(minHeight != null),
assert(maxHeight != null);
BoxConstraints还有两个构造函数分别是loose和tight:
BoxConstraints.loose(Size size)
BoxConstraints.tight(Size size)
这两个有什么区别呢?如果一个axis的最小值是0的话,那么这个BoxConstraints就是loose。
如果一个axis的最大值和最小值是相等的情况,那么这个BoxConstraints就是tight。
BoxConstraints中还有一个非常常用的方法如下:
BoxConstraints.expand({double? width, double? height})
expand的意思就是最大值和最小值都是infinity的,具体的定义可以从方法的实现中看出:
const BoxConstraints.expand({
double? width,
double? height,
}) : minWidth = width ?? double.infinity,
maxWidth = width ?? double.infinity,
minHeight = height ?? double.infinity,
maxHeight = height ?? double.infinity;
来源:https://www.cnblogs.com/flydean/p/16670416.html
猜你喜欢
- 相信你也遇到过这种场景,判断二级目录属于哪个一级目录,一个员工属于哪个上级员工领导…当Mybatis遇上目录树,有哪些解决方法?一般来说,有
- 1. 查找1) 顺序查找 SeqSearch.java2) 二分查找【二分法,放在算法讲解】2. 顺序查找有一个数列:白眉鹰王、金毛狮王、紫
- 就像集成JDBC和其他ORM框架一样,Spring也集成了iBatis。1,配置iBatis客户模板iBatis的核心是com.ibatis
- 前言坚持是一件比较难的事,坚持并不是自欺欺人的一种自我麻痹和安慰,也不是做给被人的,我觉得,坚持的本质并没有带着过多的功利主义,如果满是功利
- 大致流程客户端根据远程服务的地址,客户端发送请求至服务端,服务端解析信息并找到对应的实现类,进行方法调用,之后将调用结果原路返回,客户端解析
- 快速排序是应用最广泛的排序算法,流行的原因是它实现简单,适用于各种不同情况的输入数据且在一般情况下比其他排序都快得多。快速排序是原地排序(只
- 记录web项目部署到阿里云服务器步骤(使用 web项目、阿里云服务器、Xftp、Xshell),敬请参考和指正1.将要部署的项目打包成WAR
- 要说哪门后端语言的语法优雅,那就不得不提C#,而在我看来,LINQ语法可以说是其优雅的重要一环!通常后端从数据库查询出来的数据并不是直接返回
- java中String、StringBuffer、StringBuilder是编程中经常使用的字符串类,他们之间的区别也是经常在面试中会问到
- 以一个web项目为例,代码是可以移植的首先要导入mail.jar包,然后创建自己的类1:HTMLSender类package com.txq
- 一 技术发展技术的创新和发展都是为了解决一类问题二 框架设计Spring Framework 6大模块三 Spring AOP详解循环依赖问
- 基本概念:类加载的过程大致分为三个阶段1、加载阶段:本阶段主要把class的二进制代码加载进入JVM,并且进行常量池(类名,方法名,字段名)
- 本次内容主要介绍基于Ehcache 3.0来快速实现Spring Boot应用程序的数据缓存功能。在Spring Boot应用程序中,我们可
- 本文实例为大家分享了Java生成6位随机字符串的实现代码,具体内容如下package com.amos.tools;import java.
- 一、概要线程是操作系统中独立的个体,但这些个体如果不经过特殊的处理就不能成为一个整体,线程间的通信就是成为整体的必用方案之一。可以说,使线程
- 一、作用及种类UML类图建模语言或标准建模语言类的属性、操作中的可见性使用+、#、-分别表示public、protected、private
- 创建类的对象 = 类的实例化 = 实例化类类和对象的使用(面向对象思想落地的实现):1.创建类,设计类的成员2.创建类的对象3.通过“对象.
- 前言 之前在做一个Viewpager上面加载多个Fragment时总会实例化已经创建好的Fragmnet对象类似 viewPag
- 前言本文主要介绍的是关于C#中LINQ多条件JOIN时为什么可以使用匿名类的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细
- JAVA IDEA 打开assert 设置概念(此处为借鉴前辈们的讲解)断言(Assertion)是Java中一条语句,包含一个布尔表达式,