Flutter-Stack

Stack的定義

Stack和Container，Column，Row基本上一樣，都是一種存放其他Widget的容器，不同點(diǎn)在于Row、Column、Stash中存放的是一組Widget；Container每次只能放一個(gè)WIdget；具體請(qǐng)查看Stack的定義：

Stack({
    Key key,
    this.alignment = AlignmentDirectional.topStart,//設(shè)置子Widget開始展示的位置，從頂部開始展示
    AlignmentDirectional.topCenter//從頂部中間開始展示
    AlignmentDirectional.topEnd//從頂部結(jié)束位置展示
    AlignmentDirectional.centerStart//從中間開始位置開始展示
    AlignmentDirectional.center//從正中間展示
    AlignmentDirectional.centerEnd//從中間結(jié)束位置展示
    AlignmentDirectional.bottomStart//從底部開始位置展示
    AlignmentDirectional.bottomCenter//從底部中間位置展示
    AlignmentDirectional.bottomEnd//從底部結(jié)束位置展示
    this.textDirection,//設(shè)置子widget的左右顯示方位
    this.fit = StackFit.loose,//設(shè)置沒有通過positioned包裹的子widget的size，loose表示，以他子widget最大的size展示
    StackFit.expand//stack的size等于他父widget的size
    this.overflow = Overflow.clip,子widget超出stack時(shí)的截取方式，參考Text的溢出截取方式
    List<Widget> children = const <Widget>[],//一組子widgets
})

Stack的使用說明

Stack里面可以存放各種Widget，不過有一個(gè)缺點(diǎn)就是所有的子widget都是重疊放在一起的，請(qǐng)看事例代碼

Stack(
//        alignment: AlignmentDirectional.center,
    textDirection: TextDirection.rtl,
//        fit: StackFit.passthrough,
    children: <Widget>[
      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這個(gè)widget來輔助，可以通過Positioned來設(shè)置上下左右，寬高等屬性，具體按照需要進(jìn)行設(shè)置

Stack(
//        alignment: AlignmentDirectional.center,
    textDirection: TextDirection.rtl,
//        fit: StackFit.passthrough,
    children: <Widget>[
      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