Flutter 基础布局 Stack 使用

Posted 2023-05-01

参考技术A Stack 组件是一种层叠式布局，即组件覆盖另一个组件，覆盖的顺序取决于在children中放置的顺序，使用场景比如在图片上加上一些文字描述，即将文本Widget覆盖在图片组件，详见下面的小例。

Flutter控件——布局控件：层叠

Stack 层叠布局

Android 中的 Frame 布局是相似的，子组件可以根据距父容器四个角的位置来确定自身的位置。层叠布局允许子组件按照代码中声明的顺序堆叠起来。
Flutter中使用Stack和Positioned这两个组件来配合实现绝对定位。Stack允许子组件堆叠，而Positioned用于根据Stack的四个角来确定子组件的位置。

Stack 的 basic.dart源码

class Stack extends MultiChildRenderObjectWidget 
  /// Creates a stack layout widget.
  ///
  /// By default, the non-positioned children of the stack are aligned by their
  /// top left corners.
  Stack(
    Key? key,

//此参数决定如何去对齐没有定位（没有使用Positioned）或部分定位的子组件。所谓部分定位，
//在这里特指没有在某一个轴上定位：left、right为横轴，top、bottom为纵轴，只要包含某个轴上的一个定位属性就算在该轴上有定位。
this.alignment = AlignmentDirectional.topStart, //子Widgets们的对齐方式 eg:const FractionalOffset(0.5, 0.8),

//和Row、Wrap的textDirection功能一样，都用于确定alignment对齐的参考系，即：textDirection的值为TextDirection.ltr，
//则alignment的start代表左，end代表右，即从左往右的顺序；textDirection的值为TextDirection.rtl，则alignment的start代表右，end代表左，即从右往左的顺序。
this.textDirection,   //文本的方向，默认当然是 left-to-right

//参数用于确定没有定位的子组件如何去适应Stack的大小。StackFit.loose表示使用子组件的大小，StackFit.expand表示扩伸到Stack的大小。
this.fit = StackFit.loose,   //fit 子Widgets的放置方式，默认loose

this.overflow = Overflow.clip,   //被弃用了，用下面的clipBehavior去替换
this.clipBehavior = Clip.hardEdge,   //子Widgets溢出的处理方式。Clip.hardEdge 表示直接剪裁，不应用抗锯齿
List<Widget> children = const <Widget>[],

)

Stack 的 Children 可以是 Positioned，然后具体的子widget由参数child来包装

---

Positioned 的 basic.dart源码

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

• bottom: 距离层叠组件下边的距离
• left：距离层叠组件左边的距离
• top：距离层叠组件上边的距离
• right：距离层叠组件右边的距离
• width: 层叠定位组件的宽度
• height: 层叠定位组件的高度

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