第八回：如何使用Stack Widget

我们在上一章回中介绍了GirdView Widget,本章回中将介绍 Stack这种Widget，闲话休提，让我们一起Talk Flutter吧。

概念介绍

在Flutter中Stack主要用来叠加显示其它的Widget，类似我们日常生活中的楼层或者说PS中的图层，因此它也是一种布局类widget.

使用方法

在Flutter中通过Stack类表示Stack Widget,它和其它的Widget一样使用类的属性(或者叫成员变量）来控制界面显示，我们只需要给构造方法中的命名参数赋值就可以。常用的属性如下：

• children属性用来包含每一层的widget；
• aliment属性用来控制某个没有定位的widget在Satck中的位置；

如果觉得aliment属性不方便，也可以Position Widget来控制位置，它和Container Widget属性类似，可以包含其它Widget，并且对被包含的Widget进行位置调整。

示例代码

    Widget stackEx = Stack(
      //这个偏移只对没有设置位置的widget起作用
      //(0,0)是中央位置
      // alignment: const Alignment(0.0,0.0),
      alignment: Alignment.center,
      children: [
        const CircleAvatar(
          backgroundColor: Colors.blueAccent,
          //找不到图片使用颜色填充
          backgroundImage: AssetImage("images/ax.png"),
          radius: 80,
          //不添加时有边框，添加后没有边框
          foregroundColor: Colors.black87,
        ),
       Container(
         decoration: const BoxDecoration(
           color: Colors.grey,
         ),

         child: const Text(
           'This text',
           style: TextStyle(
             fontSize: 26,
             fontWeight: FontWeight.bold,
             color: Colors.white,
           ),
         ),
       ),
       const Positioned(
          left: 5,
          top: 1,
          child: Icon(Icons.book)
        ),
      ],
    );

在上面的代码中，我们创建了Stack对象来表示叠加的Widget,通过它的children属性包含了三个Widget：圆形的容器(CircleAvatar)，文本(Text)和图标(Icon)。

这三个Widget的代码顺序决定了它们的叠加顺序：

代码添加顺序越靠前的Widget，越位于叠加后的最底层。

这三个Widget只有文本没有位置限制，因此它受Stack中Aliment的控制位于中间。把上面的代码添加到我们创建的MaterialApp中就可以运行，运行程序时会显示一个圆形，中间是文本，图标位于左上角（不明显）。下面是MaterialApp的代码：

//build方法省略不写
  return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primaryColor: Colors.blue),

        home: Scaffold(
            appBar: AppBar(
              title: const Text("Title of Hello App"),
            ),
            body: Column(
              children: [
                wechatBottom,
                imageEx,
                stackEx,
              ],
            )
        )
    );

注意：Stack只是用来控制Widget叠加的，因此它可以嵌套在Column Widget中。下面是程序的运行效果图：

看官们，关于Stack Widget的内容就介绍到这里，欢迎大家在评论区交流与讨论!