一篇带你看懂Flutter叠加组件Stack

移动开发作者： 2024-08-25 00:20:01

注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 Stack Stack组件可以将子组件叠加显示，根据子组件

Stack(
  children: <Widget>[
    Container(
      height: 200,width: 200,color: Colors.red,),Container(
      height: 170,width: 170,color: Colors.blue,Container(
      height: 140,width: 140,color: Colors.yellow,)
  ],)

Stack(
  fit: StackFit.expand,...
)

Stack(
  alignment: Alignment.center,...
)

Stack(
  alignment: Alignment.center,children: <Widget>[
    Container(
      height: 200,Positioned(
      left: 10,right: 10,bottom: 10,top: 10,child: Container(
        color: Colors.green,)

Stack(
  overflow: Overflow.visible,Positioned(
      left: 100,top: 100,height: 150,width: 150,)

IndexedStack(
      index: _index,children: <Widget>[
        Center(
          child: Container(
            height: 300,width: 300,alignment: Alignment.center,child: Icon(
              Icons.fastfood,size: 60,Center(
          child: Container(
            height: 300,color: Colors.green,child: Icon(
              Icons.cake,child: Icon(
              Icons.local_cafe,],)

Row(
          mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
            IconButton(
              icon: Icon(Icons.fastfood),onPressed: () {
                setState(() {
                  _index = 0;
                });
              },IconButton(
              icon: Icon(Icons.cake),onPressed: () {
                setState(() {
                  _index = 1;
                });
              },IconButton(
              icon: Icon(Icons.local_cafe),onPressed: () {
                setState(() {
                  _index = 2;
                });
              },)

Stack(
  children: <Widget>[
    Positioned(
      left: 10,child: Container(color: Colors.red),)

提供top、bottom、left、right四种定位属性，分别表示距离上下左右的距离。
只能用于Stack组件中。
left、right和width3个参数只能设置其中2个，因为设置了其中2个，第三个已经确定了，同理top、bottom和height也只能设置其中2个。