Flutter Stack层叠组件 Align组件 Positioned实现定位布局

一、Flutter Stack组件

Stack表示堆的意思，我们可以用Stack或者Stack结合Align或者Stack结合 Positiond来实现页面的定位布局

属性	说明
alignment	配置所有子元素的显示位置
children	子组件

Stack层叠组件中的多个元素会摞到一起。Flutter Stack组件中包裹了Container组件和Text组件，你会发现Text摞到了Container组件上面


class LayoutDemo extends StatelessWidget {
 [@override](/user/override)
 Widget build(BuildContext context) {
   // TODO: implement build
   return Center(
     child: Stack(
       alignment: Alignment.topLeft,
       children: <Widget>[              
         Container(
           height: 400,
           width: 300,
           color: Colors.red,
         ),
         Text('我是一个文本',style: TextStyle(
           fontSize: 40,
           color: Colors.white
         ))           
       ],
     ),
   );
 }
}

二、Flutter Stack Align组件

Stack组件中结合Align组件可以控制每个子元素的显示位置

属性	说明
alignment	配置所有子元素的显示位置
child	子组件

class LayoutDemo extends StatelessWidget {
 [@override](/user/override)
 Widget build(BuildContext context) {
   // TODO: implement build
   return Center(
     child:  Container(
           height: 400,
           width: 300,
           color: Colors.red,
           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),
               )
             ],
           ),
     ),
   );
 }
}

三、Flutter Stack Positioned组件

Stack组件中结合Positioned组件也可以控制每个子元素的显示位置,相比Align组件功能更强大

属性	说明
top	子元素距离顶部的距离
bottom	子元素距离底部的距离
left	子元素距离左侧距离
right	子元素距离右侧距离
child	子组件

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