![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
flutter
PuTTY本无树
努力奋斗吧骚年
展开
-
Flutter组件之滚动组件GridView
GridViewGridView可以构建一个二维网格列表,其默认构造函数定义如下:GridView({ Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController controller, bool primary, ScrollPhysics physics, bool shr...原创 2020-03-18 10:23:52 · 2178 阅读 · 0 评论 -
Flutter滚动组件之ListView
ListViewListView是最常用的可滚动组件之一,它可以沿一个方向线性排布所有子组件,并且它也支持基于Sliver的延迟构建模型。我们看看ListView的默认构造函数定义:ListView({ ... //可滚动widget公共参数 Axis scrollDirection = Axis.vertical, bool reverse = false, Scro...原创 2020-03-17 17:02:43 · 498 阅读 · 0 评论 -
Flutter滚动组件之SingleChildScrollView
SingleChildScrollViewSingleChildScrollView类似于Android中的ScrollView,它只能接收一个子组件。定义如下:const SingleChildScrollView({ Key key, this.scrollDirection = Axis.vertical, // 是否按照阅读方向相反的方向滑动,如:scrollD...原创 2020-03-17 11:09:52 · 7602 阅读 · 0 评论 -
Flutter组件之可滚动组件简介
可滚动组件简介当组件内容超过当前显示视口(ViewPort)时,如果没有特殊处理,Flutter则会提示Overflow错误。为此,Flutter提供了多种可滚动组件(Scrollable Widget)用于显示列表和长布局。我们先介绍一下常用的可滚动组件(如ListView、GridView等),然后介绍一下ScrollController。可滚动组件都直接或间接包含一个Scrollable组...原创 2020-03-17 11:08:27 · 973 阅读 · 0 评论 -
Flutter容器组件之Clip
剪裁(Clip)Flutter中提供了一些剪裁函数,用于对组件进行剪裁:剪裁组件说明ClipOval子组件为正方形时剪裁为内贴圆形,为矩形时,剪裁为内贴椭圆(圆形裁剪)ClipRRect将子组件剪裁为圆角矩形(圆角矩形裁剪),用borderRadius控制圆角的位置大小ClipRect剪裁子组件到实际占用的矩形大小(溢出部分剪裁)(矩形裁剪),需要自定义c...原创 2020-03-16 21:04:33 · 429 阅读 · 0 评论 -
Flutter组件之容器组件Scaffold、TabBar、底部导航
Material组件库提供了丰富多样的组件,本节介绍一些常用的组件,其余的可以自行查看文档或Flutter Gallery。Flutter Gallery是Flutter官方提供的Flutter Demo,源码位于flutter源码中的examples目录下,强烈建议用户将Flutter Gallery示例跑起来,它是一个很全面的Flutter示例应用,是非常好的参考Demo,也是笔者学习Flut...原创 2020-03-16 20:07:04 · 1624 阅读 · 0 评论 -
Flutter容器组件之Container
容器组件(Container)一个组件它往往包含了一些常见的painting, positioning和sizing这样的小部件。Container相当于我们常用的div,在Flutter中用的非常多,通过一个Container组件可以实现同时需要装饰、变换、限制的场景。下面是Container的定义:Container({ this.alignment, this.padding,...原创 2020-03-14 21:03:58 · 430 阅读 · 0 评论 -
Flutter容器组件之Transform
变换(Transform)Transform可以在其子组件绘制时对其应用一些矩阵变换来实现一些特效。Matrix4是一个4D矩阵,通过它我们可以实现各种矩阵操作。定义:const Transform({ Key key, @required this.transform, this.origin, this.alignment, this.transf...原创 2020-03-14 20:53:59 · 941 阅读 · 0 评论 -
Flutter组件之容器组件DecoratedBox
装饰容器DecoratedBoxDecoratedBox可以在其子组件绘制前(或后)绘制一些装饰(Decoration),如背景、边框、渐变等。DecoratedBox定义如下:/** * 在子控件绘制之前或之后绘制一个装饰 const DecoratedBox({ Key key, @required this.decoration,//要绘制的装饰器 th...原创 2020-03-14 20:12:54 · 153 阅读 · 0 评论 -
Flutter容器组件之尺寸限制类容器(ConstrainedBox,SizedBox,UnconstrainedBox)
尺寸限制类容器尺寸限制类容器用于限制容器大小,Flutter中提供了多种这样的容器,如ConstrainedBox、SizedBox、UnconstrainedBox、AspectRatio等1.ConstrainedBoxConstrainedBox用于对子组件添加额外的约束。例如,如果你想让子组件的最小高度是80像素,你可以使用const BoxConstraints(minHeight...原创 2020-03-12 15:31:53 · 1820 阅读 · 0 评论 -
Flutter容器组件之Padding
填充(Padding)Padding可以给其子节点添加填充(留白),和边距效果类似。它的定义:Padding({ ... EdgeInsetsGeometry padding, Widget child,})属性:属性说明paddingpadding值,EdgeInsetss设置填充的值child子组件EdgeInsetsGeometry...原创 2020-03-12 11:33:13 · 1162 阅读 · 0 评论 -
Flutter布局组件之Align
对齐与相对定位(Align)flutter通过Stack和Positioned,可以指定一个或多个子元素相对于父元素各个边的精确偏移,并且可以重叠。但如果我们只想简单的调整一个子元素在父元素中的位置的话,使用Align组件会更简单一些。1.AlignAlign 组件可以调整子组件的位置,并且可以根据子组件的宽高来确定自身的的宽高,定义如下:Align({ Key key, this...原创 2020-03-11 16:08:10 · 1936 阅读 · 1 评论 -
Flutter布局组件之层叠组件Stack和Positioned
层叠布局 Stack、Positioned层叠布局和Web中的绝对定位、Android中的Frame布局是相似的,子组件可以根据距父容器四个角的位置来确定自身的位置。绝对定位允许子组件堆叠起来(按照代码中声明的顺序)。Flutter中使用Stack和Positioned这两个组件来配合实现绝对定位。Stack允许子组件堆叠,而Positioned用于根据Stack的四个角来确定子组件的位置St...原创 2020-03-11 11:08:45 · 3020 阅读 · 1 评论 -
Flutter布局组件之流式布局组件Wrap和Flow
流式布局Wrap和Flow原创 2020-03-10 17:30:23 · 613 阅读 · 0 评论 -
Flutter布局组件之弹性布局组件Flex和Expanded
弹性布局Flex弹性布局允许子组件按照一定比例来分配父容器空间。Flutter中的弹性布局主要通过Flex和Expanded来配合实现。Flex组件可以沿着水平或垂直方向排列子组件,如果你知道主轴方向,使用Row或Column会方便一些,因为Row和Column都继承自Flex,参数基本相同,所以能使用Flex的地方基本上都可以使用Row或Column。Flex本身功能是很强大的,它也可以和E...原创 2020-03-10 16:43:28 · 675 阅读 · 0 评论 -
Flutter布局组件之线性布局组件Row和Column
线性布局(Row和Column)所谓线性布局,即指沿水平或垂直方向排布子组件。Flutter中通过Row和Column来实现线性布局,类似于Android中的LinearLayout控件。Row和Column都继承自Flex。主轴和纵轴对于线性布局,有主轴和纵轴之分,如果布局是沿水平方向,那么主轴就是指水平方向,而纵轴即垂直方向;如果布局沿垂直方向,那么主轴就是指垂直方向,而纵轴就是水平方向...原创 2020-03-09 17:14:33 · 604 阅读 · 0 评论 -
Flutter基础组件之进度指示器
进度指示器Material 组件库中提供了两种进度指示器:LinearProgressIndicator和CircularProgressIndicator,它们都可以同时用于精确的进度指示和模糊的进度指示。精确进度通常用于任务进度可以计算和预估的情况,比如文件下载;而模糊进度则用户任务进度无法准确获得的情况,如下拉刷新,数据提交等。LinearProgressIndicatorLinear...原创 2020-03-06 17:25:32 · 528 阅读 · 0 评论 -
Flutter基础组件之输入框和表单
注:内容来自《Flutter 实战》1 TextField(输入框)TextField用于文本输入,它提供了很多属性,我们先简单介绍一下主要属性的作用,然后通过几个示例来演示一下关键属性的用法。const TextField({ ... TextEditingController controller, FocusNode focusNode, InputDecoratio...原创 2020-03-05 19:13:44 · 1046 阅读 · 0 评论 -
Flutter基础组件之图片及Icon
在字体文件中,每一个字符都对应一个位码,而每一个位码对应一个显示字形,不同的字体就是指字形不同,即字符对应的字形是不同的。而在iconfont中,只是将位码对应的字形做成了图标,所以不同的字符最终就会渲染成不同的图标。原创 2020-03-03 16:39:34 · 469 阅读 · 0 评论 -
flutter基础组件之Text
1.TexttextAlign:文本对齐方式,注意,对齐的参考系是Text widget本身,可选值有如下五个:TextAlign.center: 文本居中对齐。TextAlign.left: 文本左对齐。TextAlign.right: 文本右对齐。TextAlign.start: 文本开始位置对齐,类似左对齐。TextAlign.end: 文本结束位置对齐,类似右对齐。textD...转载 2020-03-03 11:25:13 · 720 阅读 · 0 评论