Flutter 多子 Widget 布之Stack、Positioned

文章目录

层叠 Widget 布局
- Stack
- - alignment
  - fit
  - overflow
- Positioned

上文 Flutter 多子 Widget 布局之Flex、Expanded、Wrap、Flow，介绍了弹性布局 Flex、Expanded和流式布局Wrap、Flow
再上文 Flutter 多子 Widget 布局之线性布局 Row、Column，介绍了线性布局Row、Column组件

层叠 Widget 布局

层叠布局，类似于Android中的FrameLayout，可以将布局叠加在另一个布局上。
Flutter中可以通过Stack和Positioned来实现相同的效果。

Stack

将控件叠加在另一个控件的上面，比如在一张图片上放置一段文字。

查看构造函数，看看都支持哪些属性：

Stack({Key key,this.alignment = AlignmentDirectional.topStart,// 定位方向this.textDirection,// 和 Row Column 中一致，用于决定控件的摆放方向this.fit = StackFit.loose,// 子控件适应 Stack 的大小模式this.overflow = Overflow.clip,// 子控件超出 Stack 的显示空间的显示模式List<Widget> children = const <Widget>[],// 子控件集合})

接下来，详细看看各个参数支持的值。

alignment

alignment支持以下值：center, bottomCenter, bottomEnd, bototmStart, centerEnd, centerStart, topCenter, topStart, topEnd，各个参数从字面意思也能理解。

直接上效果图看各参数具体的显示：这里只展示topStart, topCenter, bottomEnd，其他参数的显示效果也是类似。
主要看 四个颜色（蓝黄绿红）方块层叠的位置！

伪代码如下：

Stack(alignment: AlignmentDirectional.bottomEnd,children: <Widget>[Container(width: 350,height: 350,color: Colors.red,alignment: Alignment.topLeft,// 改变文本的显示位置，为了展示效果，这个值需要跟随 stack 的 alignment 改变child: Text('bottomEnd',style: TextStyle(color: Colors.white),),),Container(width: 250,height: 250,color: Colors.green,alignment: Alignment.topLeft,child: Text('bottomEnd',style: TextStyle(color: Colors.white),),),Container(width: 150,height: 150,color: Colors.yellow,alignment: Alignment.topLeft,child: Text('bottomEnd',style: TextStyle(color: Colors.white),),),Container(width: 50,height: 50,color: Colors.blue,alignment: Alignment.topLeft,child: Text('bottomEnd',style: TextStyle(color: Colors.white),),),],
)

fit

fit支持以下值：expand, loose, passthough

StackFit.loose：默认效果，非 Positioned子组件可取最小到最大这个区间内的值，如Stack添加宽高 350*600 的约束，那么子组件宽取值区间为0-350，高取值区间为0-600。
StackFit.expand：子组件取最大尺寸，如Stack添加宽高 350*600 的约束，那么子组件的宽为350，高为600。
StackFit.passthrough：不改变子组件约束条件。

效果示例：

StackFit.expand 效果伪代码实现：

Stack(fit: StackFit.expand,children: <Widget>[Container(width: 350,height: 350,color: Colors.red,alignment: Alignment.topLeft,// 改变文本的显示位置，为了展示效果，这个值需要跟随 stack 的 alignment 改变child: Text('expand',style: TextStyle(color: Colors.white),),),Container(width: 50,height: 50,color: Colors.blue,alignment: Alignment.topLeft,child: Text('expand',style: TextStyle(color: Colors.white),),),],
)

loose, passthrough字段，暂时没想到示例，就不放效果图了。

overflow

overflow支持以下值：expand, loose, passthough

Overflow.clip: 默认效果，超出Stack部分会被剪裁（隐藏），
Overflow.visible 超出Stack部分不会被剪裁（隐藏）。

示例效果图：
原文源码：在Flutter中，定位的Widget如何在其父Stack区域之外点击？

Positioned

Positioned 可以设置子 Widget 位置

查看构造函数，看看都支持哪些属性：

const Positioned({Key key,this.left,// 离 Stack 左边的距离this.top,// 离 Stack 上边的距离this.right,// 离 Stack 右边的距离this.bottom,// 离 Stack 底边的距离this.width,// child 的宽度this.height,// child 的高度@required Widget child, // 子控件})

示例效果图：

示例伪代码：

Stack(children: <Widget>[Container(color: Colors.yellow, width: 300, height: 300),//黄色容器Positioned(left: 18.0,top: 18.0,child: Container(color: Colors.green, width: 50, height: 50),//叠加在黄色容器之上的绿色控件),Positioned(left: 18.0,top:70.0,child: Text("距离左边距 18，上边距 70 的文本"),),Positioned(right: 18.0,top:170.0,child: Text("距离右边距 18，上边距 170 的文本"),)],
)

完~

Flutter 多子 Widget 布之Stack、Positioned相关推荐

【Flutter组件】层叠布局 Stack、Positioned
层叠布局(Stack)和 Web 中的绝对定位.Android 中的 FrameLayout 布局是相似的,子组件可以根据距父容器四个角的位置来确定自身的位置.层叠布局允许子组件按照代码中声明的顺序堆 ...
flutter 布局 Stack Positioned的混合操作两个组件Container重叠构建背景圆角操作类似css的relative
flutter 布局 Stack Positioned的混合操作两个组件Container重叠构建背景圆角操作首先看一下需求需要在这里加一个背景圆角,涉及到两个组件Container的重叠我 ...
12、 Flutter Widgets 之 Stack,Positioned叠加组件
Stack/Positioned是用来做页面布局定位的组件,需要结合使用 Stack children:一个数组,里面可放多个Widget alignment:Alignment.topCenter/ ...
Flutter学习 Widget简介
目录 1. Widget 概述 1.1 Widget概念 1.2 Widget 分类 2. Widget 接口 3. StatelessWidget 和 StatefulWidget 3.1 Flut ...
Flutter 学习 - Widget 之对话框
前言本篇我们介绍Flutter中常用的对话框,先看下效果图正文 Flutter 中对话框也是Widget,有两种显示对话框的方法,对于对画框对使用还有特殊要求,我们后面介绍,先来看下这两种方法 1 ...
【Flutter】Flutter 布局组件 ( FractionallySizedBox 组件 | Stack 布局组件 | Positioned 组件 )
文章目录一.FractionallySizedBox 组件二.Stack 布局组件三.Positioned 组件四. 完整代码示例五. 相关资源一.FractionallySizedBox ...
笔录Flutter (六) 布局系列： Stack、Positioned、Align
Flutter练习demo 常用属性关于alignment的使用使用这些属性直接使用Alignment(x, y) x.y两个值的范围在 -1 到 1 之间.如图: 坐标的圆点表示center, ...
Flutter组件--重叠布局/相对布局(Stack,Positioned组件)
1.Flutter Stack组件 Stack表示堆的意思,我们可以用Stack或者Stack结合Align或者Stack结合 Positiond来实现页面的定位布局属性说明 alignment ...
Android学习Flutter的Widget
在Android中,View是屏幕上显示的所有内容的基础, 按钮.工具栏.输入框等一切都是View. 在Flutter中,View相当于是Widget.以下的一些常见的Widget以及我们常用到的属性 ...