Flutter之层叠布局Stack、Positioned

最新推荐文章于 2025-05-04 21:00:26 发布

Seventevan

最新推荐文章于 2025-05-04 21:00:26 发布

阅读量2.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.youkuaiyun.com/Seventevan/article/details/122675402

Flutter 专栏收录该内容

2 篇文章

订阅专栏

本文介绍Flutter中使用Stack和Positioned组件实现绝对定位的方法。详细解释了Stack和Positioned的属性及用途，并通过示例展示了如何将这些组件组合起来创建复杂的布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flutter中使用Stack和Positioned这两个组件来配合实现绝对定位。Stack允许子组件堆叠，而Positioned用于根据Stack的四个角来确定子组件的位置。

一.属性列表

Stack

Stack({
  this.alignment = AlignmentDirectional.topStart,  
  this.textDirection,
  this.fit = StackFit.loose,
  this.overflow = Overflow.clip,
  List<Widget> children = const <Widget>[],
})

alignment：此参数决定如何去对齐没有定位（没有使用Positioned）或部分定位的子组件。
textDirection：与Row、Wrap的textDirection的功能一样，都用于确定alignment对齐的参考系，即：textDirection的值为TextDirection.ltr，则alignment的start代表左，end代表右，即从左往右的顺序；textDirection的值为TextDirection.rtl，则alignment的start代表右，end代表左，即从右往左的顺序。
fit：此参数用于确定没有定位的子组件如何去适应Stack的大小。
overflow：此属性决定如何显示超出Stack显示空间的子组件。

Positioned

const Positioned({
  Key? key,
  this.left, //子元素距离左侧的距离
  this.top,  //子元素距离顶部的距离
  this.right, //子元素距离右侧的距离
  this.bottom, //子元素距离底部的距离
  this.width,
  this.height,
  required Widget child,
})

二.示例

上图的源代码如下（仅截取使用到Stack、Positioned部分）

Container(
        child: Stack(
            children: [
              Container(
                height: 160.0,
                width: 290.0,
                margin: const EdgeInsets.only(top: 75,left: 20),
                decoration: const BoxDecoration(
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey,
                      offset: Offset(0.0, 0.1),//阴影xy轴偏移量
                      blurRadius: 10,//阴影模糊程度
                      spreadRadius: 0.5//阴影扩散测程度
                    ),
                  ],
                ),
        ),
              Container(
                height: 160.0,
                width: 330.0,
                margin: const EdgeInsets.only(top: 60),
                decoration: const BoxDecoration(
                  color: Colors.pinkAccent,
                    boxShadow: [
                    BoxShadow(
                        color: Colors.grey,
                        offset: Offset(0.0, 0.1),//阴影xy轴偏移量
                        blurRadius: 10,//阴影模糊程度
                        spreadRadius: 0.5//阴影扩散测程度
                    ),
                  ],
                ),
              ),
              Positioned(
                bottom: 20,
                  child: Image.asset(
                   "images/Ding.jpeg",
                    width: 110,
                    height: 250,
                  ),
              ),
              const Positioned(
                top: 65,
                left: 130,
                child:Text(
                  "Seven",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 30,
                  ),
                ) ,
              )
          ],
        )
    ),