flutter 定位布局 Stack 层叠组件 Stack 与 Align Stack 与 Positioned 实现

Flutter Stack 组件介绍

// Stack 表示"堆"的意思
// 使用 Stack 或 Stack 结合 Align 或 Stack 结合 Positioned 可以实现页面的定位布局

alignment: // 配置所有子元素的显示位置
children: // 子组件

Flutter Stack 结合 Align

// 使用 Stack 和 Align 可以控制每个子元素的显示位置

alignment: // 配置所有子元素的显示位置
child:     // 子组件

Flutter Stack 结合 Positioned

// 使用 Stack 和 Positioned 也可以控制每个子元素的显示位置

top:    // 子元素距离顶部的距离
bottom: // 子元素距离底部的距离
left:   // 子元素距离左侧距离
right:  // 子元素距离右侧距离
child:  // 子组件

案例：Stack 的使用

// 根据屏幕定位
Container(
  decoration: BoxDecoration(color: Colors.red),
  child: Stack(
    children: [
      ListView(
        children: [
          Text('111111'),
        ],
      ),
      Positioned(
        right: 0,
        bottom: 30,
        child: Container(
          height: 30,
          child: Text('222'),
        )
      )
    ],
  )
);

案例：Positioned 的使用

// 使用 Positioned 来定位组件
return Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(color: Colors.red),
  child: Stack(
    alignment: Alignment.center,
    fit: StackFit.expand,
    children: <Widget>[
      Text('123', style: TextStyle(fontSize: Screen.width(32)),),
      Positioned(
        right: 10,
        child: Text('设置', style: TextStyle(fontSize: Screen.width(32)),),
      ),
    ],
  ),
);

案例：Align 的使用

// 使用 Align 来定位组件
return Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(color: Colors.red),
  child: Stack(
    children: <Widget>[
      Align(alignment: Alignment.center, child: Icon(Icons.print),),
      Align(alignment: Alignment.bottomLeft, child: Icon(Icons.map),),
      Align(alignment: Alignment.bottomRight, child: Icon(Icons.search),),
    ],
  )
);