滕州网站建设哪家好,怎样做网站店铺,wordpress免费申请,myphoto wordpress 国外本文我们要介绍 Flutter 中布局 Widget#xff0c;包括弹性布局、线性布局 流式布局和层叠布局。
Flutter中文网
Flutter开发 一、弹性布局--Flex Flex 类似 Android 中的 FlexboxLayout#xff0c;和 Expanded 配合使用可以实现子Widget 按照一定比例来分配父容器空间。 使…本文我们要介绍 Flutter 中布局 Widget包括弹性布局、线性布局 流式布局和层叠布局。
Flutter中文网
Flutter开发 一、弹性布局--Flex Flex 类似 Android 中的 FlexboxLayout和 Expanded 配合使用可以实现子Widget 按照一定比例来分配父容器空间。 使用 Flex( direction: Axis.horizontal, children: [ ... ], ) 其中direction主轴的方向是必选参数它的类型是 Axis有以下两种值 1Axis.horizontal主轴方向为水平方向那么子Widget 就会沿水平方向排列交叉方向是垂直方向。 2Axis.vertical主轴方向为垂直方向那么子Widget 就会沿垂直方向排列交叉方向是水平方向。 Flex 的构造函数及参数说明 class Flex extends MultiChildRenderObjectWidget { Flex({ Key key, required this.direction,//必选类型 Axis主轴的方向 this.mainAxisAlignment MainAxisAlignment.start,//可选类型 MainAxisAlignment表示子Widget在主轴的对齐方式 this.mainAxisSize MainAxisSize.max,//可选类型 MainAxisSize表示主轴应该占用多大的空间分为mix 和 max this.crossAxisAlignment CrossAxisAlignment.center,//可选类型 CrossAxisAlignment表示子Widget在交叉轴的对齐方式 this.textDirection,//可选类型 TextDirection表示子Widget在主轴方向上的布局顺序分为rtl从右到左 和 ltr从左到右 this.verticalDirection VerticalDirection.down,//可选类型 VerticalDirection表示子Widget在交叉轴方向上的布局顺序 this.textBaseline,//可选类型 TextBaseline排列子Widget 时使用哪个基线 List children const [],//可选类型 List WidgetFlex布局 里排列的内容 }) : assert(direction ! null), assert(mainAxisAlignment ! null), assert(mainAxisSize ! null), assert(crossAxisAlignment ! null), assert(verticalDirection ! null), assert(crossAxisAlignment ! CrossAxisAlignment.baseline || textBaseline ! null), super(key: key, children: children); ... } Flexible 与 Expanded 为了避免子Widget 在 Row、Column、Flex中超届就可以使用 Flexible 和 Expanded当子Widget 要超过主轴的大小时会自动换行。其中 Expanded 是 Flexible 的子类。 Flexible( child: Text(内容), ) //或 Expanded( child: Text(内容), ) 1Flexible 的构造函数及参数说明 class Flexible extends ParentDataWidget { const Flexible({ Key key, this.flex 1, //可选类型 int此 Widget的弹性因子 this.fit FlexFit.loose,//可选类型 FlexFit如何分配弹性Widget在可用空间里的大小 required Widget child,//必选类型 Widget要显示的Widget }) : super(key: key, child: child); ... } 2Expanded 的构造函数及参数说明 class Expanded extends Flexible { /// Creates a widget that expands a child of a [Row], [Column], or [Flex] /// expand to fill the available space in the main axis. const Expanded({ Key key, int flex 1, required Widget child, }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child); } 3Flexible 与 Expanded 的区别 fit 参数不同Expanded 用的是默认的当还有剩余空间的时候会占满剩余的全部空间。而 Flexible 用的是 FlexFit.loose只占用自身大小的空间。 4flex 弹性系数 当 flex 为0或null则 child 是没有弹性的称为非弹性子Widget非弹性子Widget的大小就是其本身的大小不会被扩展去占用多余的空间 。 当 flex 大于0时child 是有弹性的称为弹性子Widget首先会计算出第一步所有 flex 为0或null的子Widget 的大小然后会按照弹性子Widget的flex占所有弹性子Widget的flex总和的比例分割主轴的空闲空间。 二、线性布局 Flutter 的线性布局和 Android 中的一样分为水平方向的线性布局Row和垂直方向的线性布局Column。
Row
使用 Row( children: [ Text(Hello Flutter), Image.asset( images/flutter.png, width: 200, ) ], ) Row 的构造函数及参数说明 class Row extends Flex { Row({ Key key, MainAxisAlignment mainAxisAlignment MainAxisAlignment.start,//可选类型 MainAxisAlignment表示子Widget 在主轴的对齐方式 MainAxisSize mainAxisSize MainAxisSize.max,//可选类型 MainAxisSize表示主轴应该占用多大的空间 CrossAxisAlignment crossAxisAlignment CrossAxisAlignment.center,//可选类型 CrossAxisAlignment表示子Widget在交叉轴的对齐方式 TextDirection textDirection,//可选类型TextDirection表示子Widget在主轴方向上的布局参数 VerticalDirection verticalDirection VerticalDirection.down,//可选类型VerticalDirection表示子Widget在交叉轴方向上的布局顺序 TextBaseline textBaseline,//可选类型TextBaseline排列子Widget时使用哪个基线 List children const [],//可选类型List WidgetFlex布局里排列的内容 }) : super( children: children, key: key, direction: Axis.horizontal, mainAxisAlignment: mainAxisAlignment, mainAxisSize: mainAxisSize, crossAxisAlignment: crossAxisAlignment, textDirection: textDirection, verticalDirection: verticalDirection, textBaseline: textBaseline, ); }
Column
使用 Column( children: [ Text(Hello Flutter), Image.asset( images/flutter.png, width: 200, ) ], ) Column 的构造函数及参数说明 和 Row 的参数一样 注意如果 Row 嵌套 Row或者 Column 嵌套 Column那么只有最外面的 Row 或 Column 会占用尽可能大的空间里面 Row 或 Column 所占用的空间为实际的大小。 三、流式布局--Wrap 页面元素的宽度可以按照屏幕分辨率进行适配调整把超出屏幕显示范围的控件自动换行。 使用 Wrap( direction: Axis.horizontal, children: [ ... ] ) 代码示例 import package:flutter/material.dart; class WrapWidget extends StatelessWidget { override Widget build(BuildContext context) { return new MaterialApp( title: WrapWidget, home: new Scaffold( appBar: new AppBar( title: new Text(WrapWidget), ), body: Wrap( direction: Axis.horizontal, spacing: 10.0, runSpacing: 5.0, children: [ new Chip( avatar: new CircleAvatar( backgroundColor: Colors.blue, child: new Text(1), ), label: new Text(AAAAAAAAAA)), new Chip( avatar: new CircleAvatar( backgroundColor: Colors.blue, child: new Text(1), ), label: new Text(BBBBB)), new Chip( avatar: new CircleAvatar( backgroundColor: Colors.blue, child: new Text(1), ), label: new Text(CCCCCCCCCCC)), new Chip( avatar: new CircleAvatar( backgroundColor: Colors.blue, child: new Text(2), ), label: new Text(DDDDDDDD)), new Chip( avatar: new CircleAvatar( backgroundColor: Colors.blue, child: new Text(2), ), label: new Text(EEEEEE)), ], ), ), ); } } 运行结果 Wrap 的构造函数及参数说明 class Wrap extends MultiChildRenderObjectWidget { Wrap({ Key key, this.direction Axis.horizontal,//可选类型 Axis主轴的方向默认是 Axis.horizontal this.alignment WrapAlignment.start,//可选类型 WrapAlignment子Widget在主轴上的对齐方式默认值为WrapAlignment.start和MainAxisAlignment的一样 this.spacing 0.0,//可选类型 double主轴的方向间距 this.runAlignment WrapAlignment.start,//可选类型 WrapAlignmentWrap 会自动换成或换列runAlignment 就是每行或每列的对齐方式如果主轴为水平方向就是每行如果主轴为竖直方向就是每列默认值为WrapAlignment.startWrapAlignment 的值和 MainAxisAlignment 的一样 this.runSpacing 0.0,//可选类型 double每行或每列之间的间距默认是0.0 this.crossAxisAlignment WrapCrossAlignment.start,//可选类型 WrapCrossAlignment子Widget 在交叉轴上的对齐方式WrapCrossAligment.start,WrapCrossAligment的值和MainAxisAligment的一样 this.textDirection,//可选类型 TextDirection表示子Widget在主轴方向上的布局顺序 this.verticalDirection VerticalDirection.down,//可选类型 VerticalDirection表示子Widget在交叉轴方向上的布局顺序 List children const [],//可选类型 ListWrap布局里排序的内容 }) : super(key: key, children: children); ... } 四、层叠布局--Stack Flutter 中的层叠布局类似 Android 中的 FrameLayout其子Widget 会按照添加顺序确定显示层级后面添加的会覆盖在前面添加的 Widget 上面。 使用 Stack( children: [ Image.asset( images/flutter.png, width: 200, fit: BoxFit.cover, ), Text(Hello Flutter,style: TextStyle(fontSize: 50.0),), ], ) Stack 的构造函数及参数说明 class Stack extends MultiChildRenderObjectWidget { Stack({ Key key,//可选类型 KeyWidget的标识 this.alignment AlignmentDirectional.topStart,//可选类型AlignmentDirectional this.fit StackFit.loose,//可选类型 StackFit此参数用于决定 non-positioned 子Widget 如何去适应Stack的大小 this.overflow Overflow.clip,//可选类型 Overflow决定如何显示超出 Stack显示空间的子Widget List children const [],//可选类型 ListStack布局里排序的内容 }) : super(key: key, children: children); ... } 1alignment 参数 决定如何对齐 non-positioned 子Widget 和部分 position 子Widget默认值为Alignment.topStart部分 positioned 子Widget在某一个轴上没有定义的这个轴就使用 alignment 的值比如left、right为横轴left 和right 都没有定义就是横轴没有定义只要这两个一个有值这个轴就算有值top、bottom为纵轴同理。 AlignmentDirectional 的值 AlignmentDirectional.topStart上边 start 对齐 AlignmentDirectional.topCenter上边 居中 对齐 AlignmentDirectional.topEnd上边 end 对齐 AlignmentDirectional.centerStart中间 start 对齐 AlignmentDirectional.center中间对齐 AlignmentDirectional.centerEnd中间 end 对齐 AlignmentDirectional.bottomStart下边 start 对齐 AlignmentDirectional.bottomCenter下边 居中 对齐 AlignmentDirectional.bottomEnd下边 end 对齐 2fit 参数 用于决定 non-positioned 子Widget 如何去适应Stack的大小。 StackFit 的值 StackFit.loose使用子Widget 自身的大小 StackFit.expand子Widget 扩伸到 Stack 的大小 StackFit.passthroughStack 的父Widget 的约束无修改的传递给 Stack 的子Widget 3overflow 参数 决定如何显示超出 Stack显示空间的子Widget。 overflow 的值 Overflow.visible超出部分仍能看见 Overflow.clip超出部分会被剪裁 Stack 的子Widget 为了确定子Widget 到父容器四个角的位置Stack将子Widget 分为两类positioned 子Widget 和 non-positioned 子Widget。 1Positioned positioned 子Widget 是指被 Positioned 嵌套起来的 WidgetPositioned 可以控制子Widget 到父容器四个边的距离。 使用 Stack( fit: StackFit.expand, children: [ Positioned( left: 50, top: 100, child: Image.asset( images/flutter.png, width: 200, fit: BoxFit.cover, ), ), Text(Hello Flutter), ], ), Positioned 的构造函数及参数说明 class Positioned extends ParentDataWidget { const Positioned({ Key key,//可选类型 KeyWidget的标识 this.left,//可选类型 double离Stack左边的距离 this.top,//可选类型 double离Stack上边的距离 this.right,//可选类型 double离Stack右边的距离 this.bottom,//可选类型 double离Stack底边的距离 this.width,//可选类型 double指定Widget的宽度 this.height,//可选类型 double指定Widget的高度 required Widget child, }) : assert(left null || right null || width null), assert(top null || bottom null || height null), super(key: key, child: child); ... } 注意此处的width、height 是用于配合 left、top、right、bottom 来定位 Widget 的。并且在水平方向上只能指定 left、right、width 三个属性中的两个如果三个都指定就会报错垂直方向同理。 2non-positioned子Widget non-positioned 子Widget 就是不用 Positioned 嵌套起来的 Widgetnon-positioned 子Widget 使用 Stack 设置的 alignment 来确定自己在父容器里的位置。
