Flutter--Stack组件（FrameLayout）

属性

属性	释义
alignment	控制内部子元素显示位置
position	控制内部子元素的显示位置

• 默认所有元素显示在左上角，和Android中的FrameLayout类似

eg:Stack使用：

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment(1, 0.3), // 设置坐标的形式，不设置该属性所有元素默认显示在左上角
//      alignment : Alignment.center, // 使用属性的形式
      children: <Widget>[
        Container(
          height: 400,
          width: 400,
          color: Colors.red,
        ),
        Text(
          "hah",
          style: TextStyle(fontSize: 20, color: Colors.white),
        ),
        Text(
          "----------",
          style: TextStyle(fontSize: 20, color: Colors.black),
        ),
      ],
    );
  }
}

eg：Align使用

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child:  Container(
        height: 400,
        width: 300,
        color: Colors.black,
        child: Stack(
          // alignment: Alignment.center,
          children: <Widget>[
            Align(
              alignment: Alignment(1,-0.2),
              child: Icon(Icons.home,size: 40,color: Colors.white),
            ),
            Align(
              alignment: Alignment.center,
              child: Icon(Icons.search,size: 30,color: Colors.white),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: Icon(Icons.settings_applications,size: 30,color: Colors.white),
            )
          ],
        ),
      ),
    );
  }
}

eg：Positioned使用

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child:  Container(
        height: 400,
        width: 300,
        color: Colors.black,
        child: Stack(
          // alignment: Alignment.center,
          children: <Widget>[
            Positioned(
              left: 10, // 距左侧为10
              top: 100, // 距上100
              child: Icon(Icons.home,size: 40,color: Colors.white),
            ),
            Positioned(
              left: 10,
              top: 10,
              child: Icon(Icons.search,size: 30,color: Colors.white),
            ),
            Positioned(
              right: 10,
              bottom: 10,
              child: Icon(Icons.settings_applications,size: 30,color: Colors.white),
            )
          ],
        ),
      ),
    );
  }
}