目录

Stack

Positioned

小案例

---

Stack

 Stack({Key key,this.alignment = AlignmentDirectional.topStart,//未指定区域的排布方式this.textDirection,this.fit = StackFit.loose,//没有定位的子组件如何去适应Stack的大小this.overflow = Overflow.clip,this.clipBehavior = Clip.hardEdge,//裁剪类型List<Widget> children = const <Widget>[],

• alignment：此参数决定如何去对齐没有定位（没有使用Positioned）或部分定位的子组件。所谓部分定位，在这里特指没有在某一个轴上定位：left、right为横轴，top、bottom为纵轴，只要包含某个轴上的一个定位属性就算在该轴上有定位。
• textDirection：和Row、Wrap的textDirection功能一样，都用于确定alignment对齐的参考系，即：textDirection的值为TextDirection.ltr，则alignment的start代表左，end代表右，即从左往右的顺序；textDirection的值为TextDirection.rtl，则alignment的start代表右，end代表左，即从右往左的顺序。
• fit：此参数用于确定没有定位的子组件如何去适应Stack的大小。StackFit.loose表示使用子组件的大小，StackFit.expand表示扩伸到Stack的大小。
• overflow：此属性决定如何显示超出Stack显示空间的子组件；值为Overflow.clip时，超出部分会被剪裁（隐藏），值为Overflow.visible 时则不会。

Positioned

const Positioned({Key key,this.left, this.top,this.right,this.bottom,this.width,this.height,@required Widget child,
})

left、top 、right、 bottom分别代表离Stack左、上、右、底四边的距离。

width和height用于指定需要定位元素的宽度和高度。

注意，Positioned的width、height 和其它地方的意义稍微有点区别，此处用于配合left、top 、right、 bottom来定位组件，举个例子，在水平方向时，你只能指定left、right、width三个属性中的两个，如指定left和width后，right会自动算出(left+width)，如果同时指定三个属性则会报错，垂直方向同理。

如果在Positioned指定了width或height则会使用 Positioned指定的width或height ，控件本身设置的会被覆盖 

Positioned组件只能用与Stack中，可以指定左上右下的距离对某个组件进行位置精确安放。

小案例

 定义几个色块，并进行自定义排版

//先定义几个 色块var blueBox = Container(width: 30,height: 30,color: Colors.blue,);var redBox = Container(width: 50,height: 50,color: Colors.red,);var yelBox = Container(width: 60,height: 60,color: Colors.yellow,);var blackBox = Container(width: 80,height: 80,color: Colors.black,);//后将他们进行自定义位置排版
ConstrainedBox(constraints: BoxConstraints.expand(),child: Stack(// fit: StackFit.expand,alignment: AlignmentDirectional.topCenter,children: <Widget>[Positioned(child: blueBox,left: 100,),Positioned(child: redBox,left: 100,top: 100,),Positioned(child: yelBox,right: 100,top: 100,),blackBox,],),);

运行结果如下，蓝色在 left 100 的位置，红色在距离左100上100的位置，黄色在右100 上100 的位置

黑色色快由于没有指定位置 则适用于 stack 的  alignment: AlignmentDirectional.topCenter, 属性 在居上居中的位置

欢迎关注我的公众号 这将是对我最大的鼓励与支持：