Flutter之Stack组件

/**
 * Stack是层叠布局相当于Android中的absolutelayout或者RelativityLayout
 * Stack的布局根据child分为positioned和non-positioned两种，
 * positioned根据left，top，right，bottom来设置widget的位置，相对于组件左上角
 * non-positioned则根据alignment来设置widget位置。
 * Stack的子widget，先添加的在布局下层，后添加的在布局上层
    Stack({
    Key key,
    this.alignment = AlignmentDirectional.topStart, //对齐方式，alignment配合FractionalOffset,占据的百分比
    this.textDirection,
    this.fit = StackFit.loose,
    this.overflow = Overflow.clip,//超过的部分是否裁剪掉
    List children = const [],
    })
 */

Stack(
                  fit: StackFit.loose,
//                  alignment: AlignmentDirectional.topCenter,
                  alignment: FractionalOffset(0.9, 0.5),
                  children: [
                    Container(
                      width: 100.0,
                      height: 100.0,
                      margin: EdgeInsets.only(right: 20.0,top: 10.0),
                      color: Color(0xff00ff00),
                    ),
                    Center(
                      child: GestureDetector(child: Text("按钮",
                        style: TextStyle(
                          decoration: TextDecoration.lineThrough,
                          fontSize: 18.0,
                          fontWeight: FontWeight.bold,
                          color: Color(0xffff0000),
                        ),),
                        onTap: () {
                          print("按钮");
                        },
                      ),
                    ),
                  ],
                )

Stack(
                  children: [
                    Container(
                      width: 200.0,
                      height: 100.0,
                      color: Color(0xfff1f1f1),
                    ),
                    Positioned(
                      child: GestureDetector(child: Text("按钮",
                        style: TextStyle(
                          decoration: TextDecoration.lineThrough,
                          fontSize: 18.0,
                          fontWeight: FontWeight.bold,
                          color: Color(0xffff0000),
                        ),),
                        onTap: () {
                          print("按钮");
                        },),
                      left: 10.0,
                      top: 20.0,
                    )
                  ],
                ),