Flutter-Stack的使用

Flutter-Stack

Stack的定义

Stack和Container，Column，Row基本上一样，都是一种存放其他Widget的容器，不同点在于Row、Column、Stash中存放的是一组Widget；Container每次只能放一个WIdget；具体请查看Stack的定义：

Stack({
    Key key,
    this.alignment = AlignmentDirectional.topStart,//设置子Widget开始展示的位置，从顶部开始展示
    AlignmentDirectional.topCenter//从顶部中间开始展示
    AlignmentDirectional.topEnd//从顶部结束位置展示
    AlignmentDirectional.centerStart//从中间开始位置开始展示
    AlignmentDirectional.center//从正中间展示
    AlignmentDirectional.centerEnd//从中间结束位置展示
    AlignmentDirectional.bottomStart//从底部开始位置展示
    AlignmentDirectional.bottomCenter//从底部中间位置展示
    AlignmentDirectional.bottomEnd//从底部结束位置展示
    this.textDirection,//设置子widget的左右显示方位
    this.fit = StackFit.loose,//设置没有通过positioned包裹的子widget的size，loose表示，以他子widget最大的size展示
    StackFit.expand//stack的size等于他父widget的size
    this.overflow = Overflow.clip,子widget超出stack时的截取方式，参考Text的溢出截取方式
    List children = const [],//一组子widgets
})

Stack的使用说明

Stack里面可以存放各种Widget，不过有一个缺点就是所有的子widget都是重叠放在一起的，请看事例代码

Stack(
//        alignment: AlignmentDirectional.center,
    textDirection: TextDirection.rtl,
//        fit: StackFit.passthrough,
    children: [
      Container(
        color: Colors.redAccent,
        width: 100.0,
        height: 100.0,
        child: Text('data'),
      ),
  Icon(Icons.settings),
//          Positioned(
//            top: 10,
//            left: 60,
//            child: Icon(Icons.settings),),
      Icon(Icons.opacity),

      Icon(Icons.ondemand_video),
    ],
  )

stack.jpg

为了能够使stack里面的子widget分开展示，需要借助于Positioned这个widget来辅助，可以通过Positioned来设置上下左右，宽高等属性，具体按照需要进行设置

Stack(
//        alignment: AlignmentDirectional.center,
    textDirection: TextDirection.rtl,
//        fit: StackFit.passthrough,
    children: [
      Container(
        color: Colors.redAccent,
        width: 100.0,
        height: 100.0,
        child: Text('data'),
      ),
      Positioned(
        top: 10,
        left: 60,
        child: Icon(Icons.settings),),
      Icon(Icons.opacity),

      Icon(Icons.ondemand_video),
    ],
  )

stack1.jpg