flutter 层叠布局Stack、Positioned
flutter 布局 Stack 层叠
2023-09-11 14:14:53 时间
Flutter中使用Stack和Positioned来实现层叠布局效果
1 Stack
Stack({
Key? key,
this.alignment = AlignmentDirectional.topStart,
this.textDirection,
this.fit = StackFit.loose,
this.overflow = Overflow.clip,
this.clipBehavior = Clip.hardEdge,
List<Widget> children = const <Widget>[],
})
1.1 alignment 属性
此参数决定对齐没有使用Positioned或部分定位的子widget的对齐方式,部分定位,在这里特指没有在某一个轴上定位:left、right为横轴,top、bottom为纵轴,只要包含某个轴上的一个定位属性就算在该轴上有定位。
1.2 textDirection 属性
textDirection的值为TextDirection.ltr,则alignment的start代表左,end代表右;
textDirection的值为TextDirection.rtl,则alignment的start代表右,end代表左。
1.3 fit 属性
此参数用于决定没有定位的子widget如何去适应Stack的大小。
- StackFit.loose表示使用子widget的大小
- StackFit.expand表示扩伸到Stack的大小
- StackFit.passthrough:不改变子组件约束条件
1.4 overflow
此属性决定如何显示超出Stack显示空间的子widget,值为Overflow.clip时,超出部分会被剪裁(隐藏),值为Overflow.visible 时则不会。
2 Positioned
const Positioned({
Key key,
this.left,
this.top,
this.right,
this.bottom,
this.width,
this.height,
@required Widget child,
})
left、top 、right、 bottom分别代表离Stack左、上、右、底四边的距离。width和height用于指定定位元素的宽度和高度。
3 AnimatedPositioned
AnimatedPositioned 与 Positioned 功能类似,也是用在 Stack 中给子widget定位,不同的是当left、top 、right、 bottom值发生改变时,这个过程是动态的一个动画效果
const AnimatedPositioned({
Key? key,
required this.child,
this.left,
this.top,
this.right,
this.bottom,
this.width,
this.height,
Curve curve = Curves.linear,
required Duration duration,
VoidCallback? onEnd,
})
如果你有兴趣 你可以关注一下公众号 biglead 来获取最新的学习资料。
相关文章
- Flutter Ticker 动画驱动器
- Flutter 实现微信摇一摇的功能 Flutter 加速度感应
- Flutter 底部向上动画弹出的菜单选项
- Flutter文本标签TextTagWidget,搜索记录流式布局显示文本标签
- flutter TabBar 底部导航栏
- Flutter Image 图片加载
- Flutter Stack 帧布局,层叠堆放
- Flutter Row和 Column 布局、线性布局概述
- Flutter移动电商实战 --(26)列表页_使用Provide控制子类-2
- Flutter 中的单元测试:从工作流基础到复杂场景
- 教程:Flutter 和 Rust混合编程,使用flutter_rust_bridge自动生成ffi代码
- Flutter 36: 图解自定义 View 之 Canvas (三)
- 用 Flutter 释放你的创造力:设计专业和引人入胜的用户界面的综合指南
- Nowa Flutter开发教程之 03 界面布局
- Flutter 基础组件之使用Text.rich显示具有不同样式TextSpan段落(教程含源码)
- Flutter 游戏教程之使用 Flutter 和 Flame 重现著名的 T-Rex 游戏
- Flutter macOS开发教程之 界面布局与UI组件源码(教程含源码)
- flutter系列之:flutter中可以建索引的栈布局IndexedStack
- flutter弹起键盘页面布局超限问题
- flutter 一行代码取消 返回按钮
- Flutter基础笔记
- Flutter 通过 Column 实现垂直布局
- Flutter开发 -flutter百度地图接入指南,外加定位,反地理编码,这些功能组成一个类似饿了么的配送员配送界面,这些功能你心动么?
- Flutter开发 - Null check operator used on a null value(flutter大量奇怪异常)