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),
            )
          ],
        ),
      ),
    );
  }
}