Flutter之Stack組件

/**
 * Stack是層疊布局相當于Android中的absolutelayout或者RelativityLayout
 * Stack的布局根據(jù)child分為positioned和non-positioned兩種,
 * positioned根據(jù)left,top,right,bottom來設置widget的位置,相對于組件左上角
 * non-positioned則根據(jù)alignment來設置widget位置。
 * Stack的子widget,先添加的在布局下層,后添加的在布局上層
    Stack({
    Key key,
    this.alignment = AlignmentDirectional.topStart, //對齊方式,alignment配合FractionalOffset,占據(jù)的百分比
    this.textDirection,
    this.fit = StackFit.loose,
    this.overflow = Overflow.clip,//超過的部分是否裁剪掉
    List<Widget> children = const <Widget>[],
    })
 */
Stack(
                  fit: StackFit.loose,
//                  alignment: AlignmentDirectional.topCenter,
                  alignment: FractionalOffset(0.9, 0.5),
                  children: <Widget>[
                    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: <Widget>[
                    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,
                    )
                  ],
                ),
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容