Flutter入门之旅三（Stack组件）

Stack 表示层叠组件,可以叠加的现实View，使用alignment以及Positioned来实现页面的定位布局 。

常用属性说明

属性	说明
alignment	子组件对齐方式
children	子组件

alignment：同 Container 的 alignment 属性一样的，它指定的是所有子组件的对齐方式.
所以建议在只有两个子组件的时候使用，如果有三个及以上的子组件时，建议使用 Positioned 包裹子组件来决定子组件的位置

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

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

注: width、left、right 不能同时设置，height、top、bottom 也不能同时设置。

import 'package:flutter/material.dart';
class StackDemo extends StatelessWidget{
       @override
       Widget build(BuildContext context) {
         
        
        return MaterialApp(
          home: Scaffold(
          appBar: AppBar(),
          body:stack
          ),
        );
    }

    Widget stack = Stack(
   alignment: const FractionalOffset(0.5 , 0.5), //设置偏移量 alignment决定子元素的排列位置

      children: [

        new Container(
           child: new Image.network( 
             "https://upload-images.jianshu.io/upload_images/1658521-0cbb6ef69957b9d5.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200",
              ),
        ),
         
         Positioned(
           right: 20,
           bottom: 100,
           child: 
          new Text(
          "我是多肉",
          style:TextStyle(
          fontSize: 20,
          color: Colors.white,
          ),
        ),        
         ),
         
      ],
    );
}

图片.png