Flutter組件學習六-頁面佈局 Stack 層疊組件

Flutter 頁面佈局 Stack 層疊組件使用，Stack 和Align、Stack和Positioned結合使用

1、Stack組件

1.1、屬性

屬性	說明
alignment	配置所有子元素的顯示位置
children	子組件

1.2、代碼實現

import 'package:flutter/material.dart';

class MyStackView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      //文本顯示在中間
      //alignment: Alignment(0,0),
      //文本顯示在水平中間，垂直上邊
      alignment: Alignment(0,-1),
      children: <Widget>[
        Container(
          height: 400,
          width: 300,
          color: Colors.red,
        ),
        Text("hello flutter"),
      ],
    );
  }
}

2、Stack 和 Align結合使用

2.1、屬性

屬性	說明
alignment	配置所有子元素的顯示位置
child	子組件

2.2、代碼實現

//Stack 和 Align 結合使用，實現一個容器中上放2個圖標。分別在不同的位置上
class MyStackAndAlign extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 400,
      height: 600,
      color: Colors.red,
      child: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.center,
            child: Icon(Icons.home,size: 30,color: Colors.white,),
          ),
          Align(
            alignment: Alignment.topLeft,
            child: Icon(Icons.send,size: 30,color: Colors.yellow,),
          ),
        ],
      ),
    );
  }
}

3、Stack 和 Positioned 結合使用

3.1、屬性

屬性	說明
child	子組件
top	子元素距離頂部的距離
bottom	子元素距離底部的距離
left	子元素距離左側距離
right	子元素距離右側距離

3.2、代碼實現

//Stack 和 Positioned 結合使用，控制每個子元素的位置
class StackAndPositionedView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 400,
      height: 600,
      color: Colors.red,
      child: Stack(
        children: <Widget>[
          Positioned(
            left: 10,
            child: Icon(Icons.home,size: 30,color: Colors.white,),
          ),
          Positioned(
            top: 100,
            left: 100,
            child: Icon(Icons.send,size: 30,color: Colors.yellow,),
          ),
        ],
      ),
    );
  }
}