第八回：如何使用Stack Widget

最新推荐文章于 2024-11-06 21:53:13 发布

原创

最新推荐文章于 2024-11-06 21:53:13 发布 · 805 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android #ios #Stack #Positioned

文章介绍了Flutter中的StackWidget，它是用于叠加显示其他Widget的布局工具，类似于图层。Stack可以通过children属性包含多个Widget，并用Alignment或Positioned控制其位置。文中提供了示例代码，展示了一个包含CircleAvatar、Text和Icon的Stack布局实例。

我们在上一章回中介绍了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