Flutter学习-单子布局Widget
Flutter学习-单子布局Widget
- 1. 概述
- 2. Align
- 2.1 Align的对齐方式
- 2.2 Align的区域大小控制
- 2. Center
- 3. Padding
- 4. Container
- 4.1 源码查看、基础演练
- 4.2 BoxDecoration
- 4.2.1 Color属性冲突
- 4.2.2 部分效果演示
- 4.3 实现圆角图片
1. 概述
单子布局组件的含义是其只有一个子组件,可以通过设置一些属性设置该子组件所在的位置信息等。
比较常用的单子布局组件有:Align、Center、Padding、Container。
2. Align
2.1 Align的对齐方式
我们前面经常使用的Center
组件,他的子组件为什么可以居中显示? 在我们查看Center
的源码之后,发现Center
继承自Align
,并且Center
没有做任何其他的操作, 我们传递的参数,Center原封不动的传递给Align。
class Center extends Align {/// Creates a widget that centers its child.const Center({ Key? key, double? widthFactor, double? heightFactor, Widget? child }): super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}
相当于使用Center
等于使用Align
,那么为什么在外层嵌套一个Align
之后里面的子组件就可以居中,我们可以查看下Align
的源码
const Align({Key? key,this.alignment = Alignment.center, // 对齐方式,默认居中对齐this.widthFactor, // 宽度因子,不设置的情况,会尽可能大this.heightFactor, // 高度因子,不设置的情况,会尽可能大Widget? child, // 要布局的子Widget})
由源码我们可以看出,Align
组件总有一个属性alignment
表示是对齐方式,并且有一个默认值.center
,所以里面的子组件可以居中,Align 占据了我们整个屏幕的区域
那么我们在使用Align的时候,可以通过设置alignment
的值,来控制子组件显示的位置
class GYHomeContent extends StatelessWidget {@overrideWidget build(BuildContext context) {return Align(//alignment: Alignment.topLeft,alignment: Alignment(-1,-1), //这两种方式都是可以的child: Icon(Icons.pets,size: 80,));}
}
- Align 显示的区域 中心点是 (0,0) 左上角是(-1,-1),右下角是(1,1)
2.2 Align的区域大小控制
widthFactor
和heightFactor
作用:- 因为子组件在父组件中的对齐方式必须有一个前提,就是父组件得知道自己的范围(宽度和高度)
- 如果
widthFactor
和heightFactor
不设置,那么默认Align会尽可能的大(尽可能占据自己所在的父组件); - 我们也可以对他们进行设置,比如widthFactor设置为3,那么相对于Align的宽度是子组件跨度的3倍;
class GYHomeContent extends StatelessWidget {@overrideWidget build(BuildContext context) {return Container(color: Colors.orange,child: Align(alignment: Alignment.bottomRight,// alignment: Alignment(-1,-1),child: Icon(Icons.pets, size: 80,),widthFactor: 3,heightFactor: 4,),);}
}
- 注意: 如果外层的Container设置了自己的大小,那么
widthFactor
和heightFactor
这个两个属性设置是不起作用的
class GYHomeContent extends StatelessWidget {@overrideWidget build(BuildContext context) {return Container(width: 100,height: 100,color: Colors.orange,child: Align(alignment: Alignment.bottomRight,// alignment: Alignment(-1,-1),child: Icon(Icons.pets,size: 80,),widthFactor: 3,heightFactor: 4,),);}
}
2. Center
代码演练:
class GYHomeContent extends StatelessWidget {@overrideWidget build(BuildContext context) {return Container(color: Colors.orange,child: Center(widthFactor: 2,heightFactor: 2,child: Icon(Icons.pets,size: 80,),),);}
}
3. Padding
Padding组件在其他端也是一个属性而已,但是在Flutter中是一个Widget,但是Flutter中没有Margin这样一个Widget,这是因为外边距也可以通过Padding来完成。
Padding通常用于设置子Widget到父Widget的边距(你可以称之为是父组件的内边距或子Widget的外边距)。
源码:
const Padding({Key? key,required this.padding,Widget? child,})
代码演练:
class GYHomeContent extends StatelessWidget {@overrideWidget build(BuildContext context) {return Padding(padding: EdgeInsets.only(left: 20),child: Text("padding",style: TextStyle(fontSize: 30, color: Colors.orange),),);}
}
padding
还有很多其他的用法,可以自行查看文档
4. Container
4.1 源码查看、基础演练
Container组件类似于其他Android中的View,iOS中的UIView。
如果你需要一个视图,有一个背景颜色、图像、有固定的尺寸、需要一个边框、圆角等效果,那么就可以使用Container组件。
源码:
Container({Key? key,this.alignment, //对齐方式this.padding,//容器内补白,属于decoration的装饰范围this.color,// 背景色this.decoration,// 背景装饰this.foregroundDecoration,//前景装饰double? width,//容器的宽度double? height,//容器的高度BoxConstraints? constraints,//容器大小的限制条件this.margin,//容器外补白,不属于decoration的装饰范围this.transform,this.transformAlignment,this.child,//变换this.clipBehavior = Clip.none,})
大多数属性在介绍其它容器时都已经介绍过了,不再赘述,但有两点需要说明:
- 容器的大小可以通过
width
、height
属性来指定,也可以通过constraints
来指定,如果同时存在时,width
、height
优先。实际上Container
内部会根据width
、height
来生成一个constraints
; color
和decoration
是互斥的,实际上,当指定color
时,Container
内会自动创建一个decoration
;
class GYHomeContent extends StatelessWidget {@overrideWidget build(BuildContext context) {return Container(color: Color.fromRGBO(5, 5, 20, 0.5),width: 100,height: 100,child: Icon(Icons.pets,size: 30,),);}
}
4.2 BoxDecoration
Container有一个非常重要的属性 decoration
:
- 他对应的类型是Decoration类型,但是它是一个抽象类。
- 在开发中,我们经常使用它的实现类BoxDecoration来进行实例化
BoxDecoration
的常见属性:
const BoxDecoration({this.color, //颜色,会和Container中的color属性冲突this.image, // 背景图片this.border,// 边框,对应类型是Border类型,里面每一个边框使用BorderSidethis.borderRadius, // 圆角效果this.boxShadow,// 阴影效果this.gradient,// 渐变效果this.backgroundBlendMode,// 背景混合this.shape = BoxShape.rectangle,// 形变})
4.2.1 Color属性冲突
class GYHomeContent extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(color: Color.fromRGBO(5, 5, 20, 0.5),width: 100,height: 100,child: Icon(Icons.pets,size: 30,),decoration: BoxDecoration(color: Colors.orange, ),),);}
}
其实我们查看源码便可以知道为什么会报错?
4.2.2 部分效果演示
class GYHomeContent extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(// color: Color.fromRGBO(5, 5, 20, 0.5),width: 100,height: 100,child: Icon(Icons.pets,size: 30,),decoration: BoxDecoration(color: Colors.orange,border: Border.all(color: Colors.redAccent, width: 3, style: BorderStyle.solid),borderRadius: BorderRadius.circular(5), //设置圆角 这里也可以使用only设置boxShadow: [BoxShadow(offset: Offset(5, 5), color: Colors.purple, blurRadius: 5)],// shape: BoxShape.circle, // 会和borderRadius冲突gradient:LinearGradient(colors: [Colors.orange,Colors.purple])//渐变效果),),);}
}
4.3 实现圆角图片
class GYHomeContent extends StatelessWidget {@overrideWidget build(BuildContext context) {//实现圆角图片return Center(child: Container(width: 100,height: 100,decoration: BoxDecoration(image: DecorationImage(image: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),),color: Colors.orange,borderRadius: BorderRadius.circular(10), //设置圆角 这里也可以使用only设置),),);}
}
Flutter学习-单子布局Widget相关推荐
- Flutter学习-多子布局Widget
Flutter学习-多子布局Widget 1. Flex 2. Row组件 2.1 Row组件介绍 2.2 属性解析 2.2.1 mainAxisSize 2.2.2 mainAxisAlignmen ...
- Flutter学习之布局、交互、动画
作者:真丶深红骑士 链接: https://juejin.im/post/5c617e34f265da2d90581613 本文由作者授权发布. 一.前言 前一天学习了 Flutter 基本控件和基本 ...
- FLUTTER学习笔记--布局
文章目录 一.线性布局 1.Column 2.Row 3.代码 4.效果 二.弹性布局 1.Flex 2.Expanded(可伸缩组件) 3.代码 4.效果 三.流式布局 1.Wrap(解决内容溢出问 ...
- iOS程序猿的flutter学习之路
日常学习Flutter开发的积累 推荐一些平时自己学习Flutter开发当中接触到的优秀文章 -------------------------基础知识 ----------------------- ...
- Flutter学习之入门和体验
作者:真丶深红骑士 链接: https://juejin.im/user/597247ad5188255aed1fbba6 本文由作者授权发布. 01前言 1.什么是Flutter 上周我的一位微信好 ...
- Flutter 学习之打包 - 纯Flutter项目生成Android包
###前言 前面介绍了Flutter中一些基本Widget的使用方法,下面我们来先下实战中是如何构建生成Android包的,本文我们主要介绍纯Flutter项目生成Android包的方法,以及遇到的问 ...
- Flutter第一部分(UI)第二篇:在Flutter中构建布局
前言:Flutter系列的文章我应该会持续更新至少一个月左右,从User Interface(UI)到数据相关(文件.数据库.网络)再到Flutter进阶(平台特定代码编写.测试.插件开发等),欢迎感 ...
- Flutter 学习笔记 (二) —— Flutter布局及常用widget总结
前言 在Flutter里,UI控件就是Widget,Widget根据不同的功能可以分为结构元素(如按钮或菜单),文本样式(字体或者颜色方案),布局属性(如填充,对齐,居中),可以这么理解,一个flut ...
- Flutter学习第七天 flutter布局
这个转自我自己的有道云 想看图片去那里 文档:Day3_6 flutter布局.md 链接:http://note.youdao.com/noteshare?id=b6399e53df489374f1 ...
最新文章
- android应用测试机型,app兼容测试选择哪些机型才够全面呢?
- iOS之深入解析Runtime的Method-Swizzling方法交换的妙用和底层原理
- 【转】转 Linux调优方案,sysctl.conf的设置
- 禁用内存清理_win10电脑开机内存占用高达80%以上如何解决
- 服务器的系统如何入账,云服务器费用如何入账
- confluencejira集成_Jira Service Desk使用教程之如何将Jira Cloud与Confluence集成?
- 【LeetCode】3月23日打卡-Day8
- httpposterror_java – HttpClientError:目标服务器无法响应
- 拓端tecdat|matlab使用分位数随机森林(QRF)回归树检测异常值
- 关于激活navicat11失败
- 算法系列——遗传算法matlab编程详解
- PMP-5.项目范围管理-需求跟踪矩阵
- 基于单片机的功放protues_音响放大器proteus仿真
- 不卡顿成用户购机第一要素,Mate 9深得人心
- 威斯敏斯特教堂 名言_新教堂徽标设计师的视角分析
- x86 单线并发多拨_单线多拨软路由。真正打破网络限速,飙升网速的秘诀
- MySQL报错端口3306解决方法
- 使用iMX53 IPU SISG功能控制摄像头闪光灯
- NAT 类型及检测方法
- 一个简单的网站(适合课设)