Flutter之Stack

最新推荐文章于 2024-04-09 06:42:32 发布
最新推荐文章于 2024-04-09 06:42:32 发布
阅读量794 收藏
点赞数
分类专栏： Flutter从入门到精通 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chunqiuwei/article/details/104821406
版权
这篇博客主要介绍了Flutter中的Stack组件，通过对比Android的叠加效果，展示了Stack实现UI叠加的功能。博主分析了IndexedStack的实战应用，特别是在切换底部Tab页场景中的运用，并探讨了Stack构造器的fit属性，包括StackFit.loose、StackFit.expand和StackFit.passthrough的不同效果。同时，提及了overflow属性，默认值clip的行为与预期不符的观察结果。
摘要由CSDN通过智能技术生成

博主初次接触Stack的时候，第一个感觉就是这玩意不就是跟Android的FrameLayout的效果一样的吗。都可以实现UI的叠加效果。在此简单的分析下这个控件，算是一个简单的学习笔记。
看看官方demo给的效果：
在这里插入图片描述
实现代码如下，简单的实现了红绿蓝三个色块的叠加

 child: Stack(
          children: <Widget>[
            Container
了解本专栏 订阅专栏 解锁全文 超级会员免费看
郭梧悠
关注
专栏目录
订阅专栏
flutter之Stack层叠布局-头像
qq_34497319的博客
08-16 1714
水平布局和垂直布局确实很好用，但是有一种情况是无法完成的，比如放入一个图片，图片上再写一些字或者放入容器，这时候Row和Column就力不从心了。Flutter为这种情况准备了Stack层叠布局，效果和代码如下: 层叠布局的 alignment 属性 alignment属性是控制层叠的位置的，建议在两个内容进行层叠时使用。它有两个值X轴距离和Y轴距离，值是从0到1的，都是从上层容器的左上角开始算...
Flutter 中 Stack 的使用详解（内含对比图） _ Flutter Widgets，flutter下拉刷新组件
m0_64383081的博客
11-27 870
如果你看看源码可以看到这个参数的默认值是 AlignmentDirectional.topStart ，但是这里我们依然可以使用我们熟悉的 Alignment.topLeft 来进行参数设置，这是为什么呢？我们看看来看看 AlignmentDirectional 源码吧，Alignment 源码在前面的章节我们看过了 Stack( // 居中对齐 alignment: Alignment.topLeft, children: [ getItem(3, width: 120, height: 120, col
flutter stack
weixin_30448685的博客
03-21 155
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp(home: new MyApp())); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) {...
Flutter Stack
的博客
11-21 1544
Flutter Stack 叠加布局
Flutter——最详细Stack(堆叠布局)使用教程
热门推荐
人生在世
12-06 2万+
Stack简介: 可以容纳多个组件，以叠加的方式摆放子组件，后者居上。拥有Alignment属性，可以与Positioned组件联合使用，精准并有效摆放。 属性 作用 alignment 子组件摆放的位置 clipBehavior 剪辑小部件的内容 创建一个堆叠布局 class CustomStack extends StatelessWidget { @override Widget build(BuildContext context) { var yell
Flutter：Stack
Lud的博客
10-24 398
alignment Stack 组件的每个子组件要么定位要么不定位，定位的字组件是用 Positioned 组件包裹的。Stack 组件本身包含所不定位的子组件，子组件根据 alignment 属性定位（默认为左上角）。然后根据定位的子组件的 top、right、bottom 和 left 属性将他们放置在 Stack 组件上。 示例代码如下： import 'package:flutter/m...
Flutter实现StackView
许天成的博客
08-28 1146
3.需要使用AnimateView，请看我上一篇博客。1.让界面之间可以嵌套且执行动画。2.界面的添加遵循先进后出原则。
Flutter 中 Stack 的使用详解（内含对比图） _ Flutter Widgets
flutter001的博客
12-20 1423
这里我们添加 3 个大小不同子项，看看他们是怎么排列的。 Stack( children: [ getItem(3, width: 120, height: 120, color: Colors.purple), getItem(2, width: 80, height: 80, color: Colors.blue), getItem(1), ], ) getItem 这里除 index 外，其他参数使用了选择参数 /// 获取子项目(这里使用了选择参数) Widget getItem(int ind
Flutter页面布局之Stack层叠组件
01-08
Stack表示堆的意思，我们可以使用Stack或者结合Align或Positond实现定位布局 Stack常用属性： 属性 说明 alignment 配置所有子元素的显示位置 children 子元素 结合Positioned组件来控制每个子...
Flutter 基础布局之Stack
u013474690的博客
03-27 4159
Stack意为层叠布局,先添加的控件在底下，后添加的控件在顶上。 Stack的结构体如下： Stack({ Key? key, this.alignment = AlignmentDirectional.topStart, this.textDirection, this.fit = StackFit.loose, @Deprecated( 'Use clipBehavior instead. See the migration guide in f
Flutter Stack 层叠组件
马志武的博客
06-10 3492
在介绍Stack 层叠组件时，顺便带上Align和Positioned，以及组合使用 参数详解 Stack 属性 说明 alignment 布局定位 默认AlignmentDirectional.topStart 我们也可以直接传入参数，自定义位置（值在1与-1之间），如：alignment: Alignment(0.5,0.5), t...
flutter之Stack实例
chunchun1230的博客
09-03 786
   
Flutter 基础组件之 Stack
禽兽先生不禽兽
12-28 1万+
如果说 Row 和 Column 相当于 Android 的 LinearLayout 的话，那么 Stack 就有点像 Android 中 FrameLayout，它可以使子组件堆叠起来，但是它比 FrameLayout 要强大，它可以控制子组件的位置，使用起来也是很简单的。   1 构造方法 Stack({Key key, AlignmentGeometry alignment: Ali...
Flutter-Stack
Clear亮的博客
06-04 621
Flutter组件之Stack 叠层组件 属性 叠层的实现是从上到下，即越往下的组件越在界面最上面 必选 1. children => List<Widget> 所包含的组件（孩子） 可选 1. alignment => Alignment 子组件的布局（即孩子在容器内的对齐） 例子 // 最底层是250*250的白色底色，上一层是背景为红橙黄渐变色的组...
Flutter 中 Stack 的使用详解（内含对比图） _ Flutter Widgets(1)
最新发布
2401_84121827的博客
04-09 714
为啥不聊overflow呢，因为本文是基于 Flutter 2.2.1 版本的，overflow已经被弃用了，很多地方的剪裁行为以后都统一为，这参数我们之前在剪裁篇《Flutter 中各种剪裁 Widget 的使用》聊过，建议回看当我们设置的子项定位后大小超过了 Stack 布局的时候，我们期望怎样剪裁渲染呢？是剪裁还是显示，是带抗锯齿还是不带呢？// 设置剪裁行为默认 hardEdge。
flutter之Stack
chunchun1230的博客
09-03 278
   
Flutter 基础布局Widgets之Stack详解
weixin_34132768的博客
04-27 218
概述 Stack 组件是一种层叠式布局，即组件覆盖另一个组件，覆盖的顺序取决于在children中放置的顺序，使用场景比如在图片上加上一些文字描述，即将文本Widget覆盖在图片组件，详见下面的小例。 构造函数 Stack({ Key key, this.alignment = AlignmentDirectional.topStart, this.textDirecti...
flutter组件之Stack
shenshulong的博客
01-09 384
stack组件可以实现定位问题，如果您想以简单的方式重叠多个子级，例如具有一些文本和图像，并用渐变和一个附加在底部的按钮覆盖，则该类很有用。 // SizedBox组件能强制子控件具有特定宽度、高度或两者都有,使子控件设置的宽高失效 // width: 100.0,//宽度 // height: 100.0,//高度 // child: Container( // width: 200.0,...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

郭梧悠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值