flutter 层叠布局Stack组件(实现定位)

层叠组件:
	Stack(
	 	alignment:Alignment.center  若不设置alignment，所有元素都会重叠在左角
		alignment: Alignment(1,-1),    若子元素有容器,会按照该元素布局
        children: <Widget>[
	        Container(
	          height: 400,
	          width: 400,
	          color: Colors.blue,
	        ),
	        Text("文本"),
	        Text("文本222")

	      ],  
		)
	其中:数值布局
	必须子元素中有类似Container的容器,后面的元素会按照该容器布局,(-1,-1)为左上角圆点,x方向最大长度为1,y方向最大长度为1,(0,0)为中心点

定位:
align:
会相对于父元素布局
 Stack(
    children: <Widget>[
         Align(
             alignment: Alignment.center, //也可以使用数值布局，
             child: Icon(Icons.home,size:40,color: Colors.white) 
         ),
    ]



坐标定位
positioned:
会相对于父元素绝对定位
 Stack(
    children: <Widget>[
         Positioned(
         	left:n,
         	right:n,
         	bottom:n,
         	top:n,
            child: Icon(Icons.home,size:40,color: Colors.white) 
         ),
    ]

代码示例:

import "package:flutter/material.dart";

void main()
{
  runApp(App());
}

class App extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home:Scaffold(appBar: AppBar(title: Text("hh")),
        body:Home2()
      )
      ,);
  }
}

class Home extends StatelessWidget{


  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Stack(  //将元素堆叠在左上角一个位置,按子元素出现顺序堆叠,后面元素会覆盖在前面元素上
    // alignment:Alignment.center, //设置子元素的位置
    alignment: Alignment(1,-1),  //必须子元素中有类似Container的容器,后面的元素会按照该容器布局,(-1,-1)为左上角圆点,x方向最大长度为1,y方向最大长度为1,(0,0)为中心点
      children: <Widget>[
        Container(
          height: 400,
          width: 400,
          color: Colors.blue,
        ),
        Text("文本"),
        Text("文本222")

      ],  
    );
  }
}


class Home2 extends StatelessWidget{


  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return
        Container(
          height: 400,
          width: 400,
          color: Colors.blue,
          child: Stack(
            children: <Widget>[
              Align(
                alignment: Alignment.center, //也可以使用数值布局
                child: Icon(Icons.home,size:40,color: Colors.white) ),
              
              Align(
                alignment: Alignment.bottomRight,
                child:  Icon(Icons.search,size:40,color: Colors.white),
                 ),
              Positioned(
                left: 20,
                bottom:0,
                child: Icon(Icons.category,size:40,color: Colors.white), ),
            ],
          ),
        );
  }
}