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

落日映苍穹つ 2021-07-24 11:45 626阅读 0赞

层叠组件:
    	Stack(
    	 	alignment:Alignment.center  若不设置alignment，所有元素都会重叠在左角
    		alignment: Alignment(1,-1),    若子元素有容器,会按照该元素布局
    		overflow:Overflow.visiable   布局为负数时,超出父组件的内容可见
            children: <Widget>[
    	        Container(
    	          height: 400,
    	          width: 400,
    	          color: Colors.blue,
    	        ),
    	        Text("文本"),
    	        Text("文本222")
    
    	      ],  
    		)
    	其中:数值布局
    	必须子元素中有类似Container的容器,后面的元素会按照该容器布局,(-1,-1)为左上角圆点,x方向最大长度为1,y方向最大长度为1,(0,0)为中心点
    
    定位:(用Center组件可以直接实现中心定位)
    align:
    会相对于父元素布局
     Stack(
        children: <Widget>[
             Align(
                 alignment: Alignment.center, //也可以使用数值布局，
                 child: Icon(Icons.home,size:40,color: Colors.white) 
             ),
        ]
    
    
    
    坐标定位：绝对定位,必须指定高度和宽度,高度可通过组件本身或top和bottom设置
    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), ),
                ],
              ),
            );
      }
    }