前言 如果只想简单的调整一个子元素在父元素中的位置的话,使用Align组件会更简单一些. 接口描述 const Align({ Key key, // 需要一个AlignmentGeometry类型的值,表示子组件在父组件中的起始位置. // AlignmentGeometry 是一个抽象类,它有两个常用的子类:Alignment和 FractionalOffset. this.alignment = Alignment.center, // widthFactor和heightFactor是用…

前言 布局类组件都会包含一个或多个子组件,不同的布局类组件对子组件排版(layout)方式不同. 我们知道,Element树才是最终的绘制树,Element树是通过Widget树来创建的(通过Widget.createElement()),Widget其实就是Element的配置数据. 故而,根据Widget是否需要包含子节点可将Widget分为三类,并对应三种Element,如下表: Widget 对应的Element 用途 LeafRenderObjectWidget LeafRenderO…

前言 层叠布局,即子组件可以根据距父容器四个角的位置来确定自身的位置.绝对定位运行子组件堆叠起来,即按照代码中声明的顺序. Flutter中使用Stack和Positioned这两个组件来配合实现绝对定位,Stack允许子组件堆叠,而Positioned用于根据Stack的四个角来确定子组件的位置. 接口描述 Stack({ Key key, // 此参数决定如何去对齐没有定位(没有使用Positioned)或部分定位的子组件. // 所谓部分定位,在这里特指没有在某一个轴上定位:left.ri…

前言 把超出屏幕显示范围会自动折行的布局称为流式布局.Flutter中通过Wrap和Flow来支持流式布局,将Row换成Wrap后溢出部分则会自动折行. Wrap 接口描述 Wrap({ Key key, this.direction = Axis.horizontal, this.alignment = WrapAlignment.start, // 主轴方向子widget的间距 this.spacing = 0.0, // 纵轴方向的对齐方式 this.runAlignment = Wrap…

前言 所谓线性布局,即指沿水平或垂直方向排布子组件.Flutter中通过Row和Column来实现线性布局,并且它们都继承自弹性布局(Flex). 接口描述 Row({ Key key, // 表示子组件在Row所占用的水平空间内对齐方式. // 如果mainAxisSize值为MainAxisSize.min,则此属性无意义,因为子组件的宽度等于Row的宽度. // 只有当mainAxisSize的值为MainAxisSize.max时,此属性才有意义. // MainAxisAlignmen…

前言 弹性布局允许子组件按照一定比例来分配父容器空间,Flutter中的弹性布局主要通过Flex和Expanded来配合实现. Flex Flex组件可以沿着水平或垂直方向排列子组件,如果你知道主轴方向,使用Row或Column会方便一些,因为Row和Column都继承自Flex,参数基本相同,所以能使用Flex的地方基本上都可以使用Row或Column.Flex本身功能是很强大的,它也可以和Expanded组件配合实现弹性布局.Flex继承自MultiChildRenderObjectWidg…

Flutter系统提供了一些日期选择类组件,比如DayPicker.MonthPicker.YearPicker.showDatePicker.CupertinoDatePicker等,其中前4个为Material风格组件,最后一个为iOS风格组件.本文介绍了控件的基本用法及如何实现国际化,如果系统提供的国际化不满足你的需要,最后也介绍了如何实现自定义国际化. DayPicker 显示给定月份的日期,并允许选择一天.这些天以矩形网格排列,一周的每一天都有一列. DayPicker有几个必填参数,…

注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 ClipRect ClipRect组件使用矩形裁剪子组件,通常情况下,ClipRect作用于CustomPaint . CustomSingleChildLayout . CustomMultiChildLayout . Align . Center . OverflowBox . SizedOverflowBox组件,例如ClipRect作用于Align…

本文主要介绍Flutter布局中的Padding.Align以及Center控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Padding A widget that insets its child by the given padding. 1.1 简介 Padding在Flutter中用的也挺多的,作为一个基础的控件,功能非常单一,给子节点设置padding属性.写过其他端的都了解这个属性,就是设置内边距属性,内边距的空白区域,也是widget的一部分. Flutter…

当我们创建了一个安卓项目后,我们会发现真正建立一个完善的安卓项目并不是想象的那么容易.其实和设计GUI可视化界面一样,开发安卓也需要考虑很多方面,主要考虑的还是界面布局和需要的组件. 一:Android用户界面布局管理 Android系统按照MVC(模型(model)-视图(view)-控制器(controller))设计模式将应用程序的界面设计与功能控制设计分离,类似于前后端分离,可以单独哦修改用户界面和后面的控制代码,而在AS中,前端的界面布局文件是在生成的应用程序框架项目的res资源目录的…