Flutter 相对布局之Stack

简介: Flutter 相对布局之Stack

效果


image.png

简介

相对布局,类似于android中的RelativeLayout、FrameLayout。

既可以相对父容器确定自己的位置,也可以多个widget重叠显示。

Stack与Positioned搭配使用。


源码

Stack
  Stack({
    Key key,
    this.alignment = AlignmentDirectional.topStart,
    this.textDirection,
    this.fit = StackFit.loose,
    this.overflow = Overflow.clip,
    List<Widget> children = const <Widget>[],
  })


alignment :对齐方式,即没有位置定位的widget的对齐方式,当只有横向定位时,比如left有实参,则影响其纵向的对齐方式,再如子widget的top有值,即纵向定位有效,则影响其横向的对齐方式。

fit:没有定位的子widget的大小,默认StackFit.loose,使用子widget的大小,StackFit.expand则填充stack。

overflow :超出stack的显示方式,默认Overflow.clip裁剪,Overflow.visible超出也显示。

Positioned
  const Positioned({
    Key key,
    this.left,
    this.top,
    this.right,
    this.bottom,
    this.width,
    this.height,
    @required Widget child,
  })


主要用到left、top、right、bottom四个参数来定位。

示例

如效果图所示,一个简单的登录界面,顶部的logo和底部的登录button是重叠显示在中间Card之上的。

所以我们大概结构就是一个Stack下有3个child,一个未定位的Card,和两个定位的Positioned。


Stack(alignment: Alignment.topCenter, children: <Widget>[
          Container(
            margin: EdgeInsets.only(top: 50),
            padding: EdgeInsets.all(40),
            child: Card(
              ...
            ),
          ),
          Positioned(
            top: 40,
            left: MediaQuery.of(context).size.width / 2 - 35,
            child: Center(
              ...
            ),
          ),
          Positioned(
            bottom: 20,
            left: 130,
            right: 130,
            ...
          ),
        ]),


第一个就是Container,包裹住Card,主要是内填充和外填充。

第二个就是logo,主要是左边位置是屏幕的一半减去自身的一半。

第三个就是底部登录button了。

具体位置显示还要根据自己需求调试。


Github

https://github.com/yechaoa/wanandroid_flutter


目录
相关文章
|
1天前
|
编解码 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的响应式设计与自适应布局
【4月更文挑战第30天】Flutter框架助力移动应用实现响应式设计与自适应布局,通过层次化布局系统和`Widget`树管理,结合`BoxConstraints`定义尺寸范围,实现自适应。利用`MediaQuery`获取设备信息,调整布局以适应不同屏幕。`FractionallySizedBox`按比例设定尺寸,`LayoutBuilder`动态计算布局。借助这些工具,开发者能创建跨屏幕尺寸、方向兼容的应用,提升用户体验。
【Flutter前端技术开发专栏】Flutter中的响应式设计与自适应布局
|
1天前
|
开发框架 前端开发 数据安全/隐私保护
【Flutter 前端技术开发专栏】Flutter 中的布局与样式设计
【4月更文挑战第30天】本文探讨了Flutter的布局和样式设计,关键点包括:1) 布局基础如Column、Row和Stack用于创建复杂结构;2) Container、Center和Expanded等常用组件的作用;3) Theme和Decoration实现全局样式和组件装饰;4) 实战应用如登录界面和列表页面的构建;5) 响应式布局利用MediaQuery和弹性组件适应不同屏幕;6) 性能优化,避免过度复杂设计。了解并掌握这些,有助于开发者创建高效美观的Flutter应用。
【Flutter 前端技术开发专栏】Flutter 中的布局与样式设计
|
1天前
|
编解码 算法 开发者
Flutter的布局系统:深入探索布局Widget与布局原则
【4月更文挑战第26天】Flutter布局系统详解,涵盖布局Widget(Row/Column、Stack、GridView/ListView、CustomSingleChildLayout)和布局原则(弹性布局、约束优先、流式布局、简洁明了)。文章旨在帮助开发者理解并运用Flutter的布局系统,创建适应性强、用户体验佳的界面。通过选择合适的布局Widget和遵循原则,可实现复杂且高效的UI设计。
|
1天前
|
容器
Flutter笔记:Box协议的布局约束原理与应用
Flutter笔记:Box协议的布局约束原理与应用
49 0
|
1天前
|
开发者 索引 容器
Flutter开发笔记:Flutter 布局相关组件
Flutter开发笔记:Flutter 布局相关组件
138 0
|
11月前
|
容器
Flutter的Stack和Positioned的控件
Flutter的Stack和Positioned的控件
|
11月前
|
容器
Flutter灵活布局要掌握的两个控件Expanded和Flexible
Flutter灵活布局要掌握的两个控件Expanded和Flexible
|
11月前
|
容器
利用Flutter的LayoutBuilder、BoxConstraints创建自适应布局控件
利用Flutter的LayoutBuilder、BoxConstraints创建自适应布局控件
|
11月前
|
容器
如何将空间堆叠起来?Flutter控件之Stack控件
如何将空间堆叠起来?Flutter控件之Stack控件
|
11月前
|
Dart 容器
flutter两个非常常用的布局小空间SizedBox和Divider
flutter两个非常常用的布局小空间SizedBox和Divider

热门文章

最新文章