> 文章列表 > 第八回:如何使用Stack Widget

第八回:如何使用Stack Widget

第八回:如何使用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的内容就介绍到这里,欢迎大家在评论区交流与讨论!