【Flutter】页面布局:层叠布局(Stack、Positioned)
在 Flutter 中,布局系统提供了多种方式来管理 UI 元素的排列方式。其中,Stack
和 Positioned
是非常重要的布局组件,允许开发者将子组件按层叠方式(即堆叠)布局,使得组件可以相互重叠。通过使用 Stack
和 Positioned
,可以轻松实现复杂的界面效果,如悬浮按钮、页面上的层次关系、背景覆盖等。
本教程将详细介绍 Stack
和 Positioned
的工作原理、常见使用场景,并通过实例展示如何在 Flutter 中实现灵活的层叠布局。
什么是层叠布局?
Stack
是 Flutter 中的一个布局组件,允许多个子组件按照堆叠顺序展示,也就是说,后添加的子组件会覆盖前面的子组件。与其他布局不同,Stack
不会自动调整子组件的位置,而是将子组件彼此叠加放置。
Positioned
是 Stack
的子组件之一,用来精确控制子组件在 Stack
中的位置。通过 Positioned
,可以指定子组件相对于 Stack
边缘的位置,如 top
、bottom
、left
和 right
等。
Stack
的基本使用
Stack
的核心理念是:它允许多个子组件按照 z 轴(深度)的顺序堆叠在一起。子组件按照声明顺序叠放,越后声明的组件位于上方。
基本示例
import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget { Widget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Stack 示例')),body: Stack(children: <Widget>[Container(width: 300,height: 300,color: Colors.red,),Container(width: 200,height: 200,color: Colors.green,),Container(width: 100,height: 100,color: Colors.blue,),],),),);}
}
在这个示例中,我们使用了 Stack
来创建三个不同大小的彩色方块。由于 Stack
的布局特性,后添加的组件会覆盖前面的组件,因此最终效果是蓝色方块叠加在绿色方块上,而绿色方块又叠加在红色方块上。
Stack
的核心属性
alignment
alignment
属性用于控制子组件在 Stack
中的对齐方式。Stack
默认情况下将子组件放置在左上角,但可以通过 alignment
属性来改变这一行为。
常见的 alignment
值:
Alignment.topLeft
: 左上角对齐(默认)。Alignment.topRight
: 右上角对齐。Alignment.center
: 居中对齐。Alignment.bottomRight
: 右下角对齐。
Stack(alignment: Alignment.center,children: <Widget>[Container(width: 300,height: 300,color: Colors.red,),Container(width: 200,height: 200,color: Colors.green,),],
)
在上面的代码中,两个方块将会在 Stack
中居中对齐,而不是默认的左上角对齐。
fit
fit
属性决定 Stack
的大小是否跟随子组件的尺寸变化,常见的值包括:
StackFit.loose
: 子组件可以按原有大小展示,不强制调整。StackFit.expand
: 子组件强制占满整个Stack
。StackFit.passthrough
: 子组件尺寸自适应。
Stack(fit: StackFit.expand,children: <Widget>[Container(color: Colors.red,),Container(width: 200,height: 200,color: Colors.green,),],
)
在这个例子中,红色的 Container
将会占据整个 Stack
的空间,而绿色的 Container
将按照其自身大小展示。
overflow
overflow
属性用于控制当子组件超出 Stack
边界时的显示行为:
Overflow.visible
: 超出部分仍会显示(默认)。Overflow.clip
: 超出部分会被剪裁,无法显示。
Positioned
的使用
Positioned
是 Stack
的子组件之一,专门用于在 Stack
中精确控制子组件的位置。通过 Positioned
,我们可以定义子组件距离 Stack
边缘的距离。
Positioned
的常见属性:
top
: 距离Stack
顶部的距离。bottom
: 距离Stack
底部的距离。left
: 距离Stack
左侧的距离。right
: 距离Stack
右侧的距离。width
: 子组件的宽度。height
: 子组件的高度。
示例:使用 Positioned
布局子组件
import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget { Widget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Positioned 示例')),body: Stack(children: <Widget>[Positioned(top: 50,left: 50,child: Container(width: 100,height: 100,color: Colors.red,),),Positioned(bottom: 50,right: 50,child: Container(width: 100,height: 100,color: Colors.green,),),],),),);}
}
在这个示例中,两个方块分别被放置在距离 Stack
顶部和左侧 50 像素的位置,以及距离底部和右侧 50 像素的位置。Positioned
提供了强大的精确定位功能,允许我们在 Stack
中任意定位子组件。
Stack
与 Positioned
的复杂布局实例
通过结合 Stack
和 Positioned
,我们可以实现一些复杂的 UI 布局效果,比如构建具有背景图片的页面,或者在固定位置上放置悬浮按钮。
示例:实现一个悬浮按钮布局
import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget { Widget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('悬浮按钮示例')),body: Stack(children: <Widget>[// 背景图片Positioned.fill(child: Image.network('https://flutter.dev/assets/homepage/carousel/slide_1-layer_0-2e0e50a9a7329c64b19faacc7b00d7e6.png',fit: BoxFit.cover,),),// 中心文本Center(child: Text('Hello Flutter!',style: TextStyle(fontSize: 36,color: Colors.white,fontWeight: FontWeight.bold,),),),// 右下角悬浮按钮Positioned(bottom: 30,right: 30,child: FloatingActionButton(onPressed: () {},child: Icon(Icons.add),),),],),),);}
}
这个例子展示了如何使用 Stack
和 Positioned
来创建一个具有背景图片、中心文本以及悬浮按钮的页面布局。通过 Positioned.fill
,我们让背景图片占据整个 Stack
,同时使用 Center
来将文本居中显示,最后在页面的右下角放置一个悬浮按钮。
Stack
与 Positioned
的高级用法
除了基础用法,Stack
和 Positioned
还可以与 AnimatedPositioned
等动画组件结合使用,创建动态的布局效果。
示例:使用 AnimatedPositioned
实现动画效果
import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatefulWidget { _MyAppState createState() => _MyAppState();
}class _MyAppState extends State<MyApp> {bool _isMoved = false; Widget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('AnimatedPositioned 示例')),body: Stack(children: <Widget>[AnimatedPositioned(duration: Duration(seconds: 2),left: _isMoved ? 200 : 50,top: _isMoved ? 200 : 50,child: GestureDetector(onTap: () {setState(() {_isMoved = !_isMoved;});},child: Container(width: 100,height: 100,color: Colors.blue,),),),],),),);}
}
这个示例通过 AnimatedPositioned
实现了点击蓝色方块后,它会平滑移动到另一个位置的动画效果。
总结
在 Flutter 中,Stack
和 Positioned
为开发者提供了灵活的层叠布局方式,特别适用于需要子组件重叠或在页面上悬浮的场景。通过结合使用 alignment
、fit
等属性以及 Positioned
子组件,开发者可以轻松实现复杂的 UI 布局。
掌握 Stack
与 Positioned
的使用,能大大增强 Flutter 应用的布局能力,为构建美观且功能强大的界面提供更多可能性。
相关文章:
【Flutter】页面布局:层叠布局(Stack、Positioned)
在 Flutter 中,布局系统提供了多种方式来管理 UI 元素的排列方式。其中,Stack 和 Positioned 是非常重要的布局组件,允许开发者将子组件按层叠方式(即堆叠)布局,使得组件可以相互重叠。通过使用 Stack 和 P…...

SpringBoot实现的汽车票在线预订系统
2相关技术 2.1 MySQL 数据库 MySQL 是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统,它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等,非…...

集合框架14:TreeSet概述、TreeSet使用、Comparator接口及举例
视频链接:13.29 TreeSet概述_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1zD4y1Q7Fw?spm_id_from333.788.videopod.episodes&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5&p29 1、TreeSet概述 基于排列顺序实现元素不重复;实现了Sort…...
uniapp获取底部导航tabbar的高度(H5)
uniapp获取底部导航tabbar的高度(H5) <view :style"bottom: tabBarHeight px;"> </view>tabBarHeight: 0, // 底部tabBar高度, h5// #ifdef H5 getTabBarHeight(){const systemInfo uni.getSystemInfoSync()this.t…...

接口测试 —— 如何测试加密接口?
接口加密是指在网络传输过程中,将数据进行加密,以保护数据的安全性。接口加密可以采用多种加密算法,如AES、DES、RSA等。测试接口加密的目的是验证接口加密算法的正确性和安全性。以下是一些详细的测试方法和注意事项: 接口加密字…...
033 商品搜索
文章目录 SearchController.javaPage.javaSpuInfoServiceImpl.javaSpuInfoService.javaCubemallSearchApplication.javasearch.htmlpom.xml 功能分析 页面回显的数据: searchMap keywords:搜索的关键词 brand:过滤条件-品牌 category&…...
身份证二要素实名认证接口-身份证核验接口-身份证实名API
接口简介:企业三要素验证,输入公司名称、统一社会信用代码、法人姓名验证是否一致 接口地址:https://www.wapi.cn/api_detail/62/169.html 在线核验:https://www.wapi.cn/icardauth.html 网站地址:https://www.wapi.cn…...

一次恶意程序分析
首先F12shift查看字符表 字符表发现可疑字符串 双击进入 再tab 进入这里 推测为main函数 可见一些可疑的api FindResourceW推测该木马使用了资源加载 VirtualAlloc申请内存 然后sub_1400796E0 有 dwSize 参数 推测为 拷贝内存 memcpy类似函数 、 然后sub_140078CB0函数 跟进函…...

Javaweb基础-vue
Vue.js Vue是一套用于构建用户界面的渐进式框架。 起步 引入vue <head><script src"static/js/vue2.6.12.min.js"></script> </head> 创建vue应用 <body> <div id"index"><p>{{message}}</p> </div>…...

2. MySQL数据库基础
一、数据库的操作 1. 显示当前的数据库 SHOW DATABASES;2. 创建数据库 语法: CREATE DATABASE [IF NOT EXISTS] db_name [create_specification...];//create_specification包括:[DEFAULT] CHARACTER SET charset_name[DEFAULT] COLLATE collation_n…...

java集合进阶篇-《泛型》
个人主页→VON 收录专栏→java从入门到起飞 目录 一、前言 二、泛型的简要概述 三、泛型的基本概念 类型参数: 通配符: 边界: 使用泛型的好处: 四、泛型类 五、泛型方法 六、思考 七、疑惑 一、前言 泛型对于我来说又…...

pytorh学习笔记——cifar10(三)模仿VGGNet创建卷积网络
VGG16是由牛津大学视觉几何组(Visual Geometry Group)提出的一种深度卷积神经网络模型。 VGGNet 探索了卷积神经网络的深度与其性能之间的关系,成功地构筑了 16~19 层深的卷积神经网络,同时拓展性又很强,迁移到其它图片…...

题目:连续子序列
解题思路: 首先,不能使用暴力枚举,时间为O(n2),超时。以下为正确做法: 假设找到一段区间(其和>m),如上图黄色部分,那么该区间加上i后面的元素形成的新区间和都>m&a…...

深入解析:Nacos AP 模式的实现原理与应用场景
优质博文:IT-BLOG-CN 一、CAP 基础 Nacos作为注册中心同时支持CP和AP模式。 Nacos通过不同的协议和机制来实现这两种模式,以满足不同的需求场景。 在Nacos中,默认情况下使用的是AP模式,通过Distro协议来实现。AP模式主要关…...
snmpnetstat使用说明
1.snmpnetstat介绍 snmpnetstat命令是用来查看snmp服务器的端口连接信息。 2.snmpnetstat安装 1.snmpnetstat安装 命令: yum -y install net-snmp net-snmp-utils [root@logstash ~]# yum -y install net-snmp net-snmp-utils Loaded plugins: fastestmirror Loading mi…...

linux线程 | 同步与互斥 | 互斥(下)
前言:本篇文章主要讲述linux线程的互斥的知识。 讲解流程为先讲解锁的工作原理, 再自己封装一下锁并且使用一下。 做完这些就要输出一堆理论性的东西, 但博主会总结两条结论!!最后就是讲一下死锁。 那么, 废…...
2024-10-17 问AI: [AI面试题] 讨论 AI 的挑战和局限性
文心一言 AI(人工智能)虽然取得了显著的进步,但仍面临多方面的挑战和局限性。以下是对AI挑战和局限性的详细讨论: 一、数据质量与可靠性 数据质量:AI系统依赖于高质量的数据进行训练和学习。如果数据质量低劣或包含…...
go基础(一)
包声明引入包函数变量语句&表达式注释 package main//包声明import "fmt"//引入包 //函数 func main() {/* 这是我的第一个简单的程序 */fmt.Println("Hello, World!") }基础语法 标记 go程序可以由多个标记组成,可以是关键字࿰…...
python忽略warnings 的方法
我在训练深度学习模型的时候一直出现这样的警告,但是不影响运行: UserWarning: Failed to load image Python extension: [WinError 127] 找不到指定的程序。 warn(f"Failed to load image Python extension: {e}") 要避免在 Python 程序运…...

2024年底蓝奏云最新可用API接口列表 支持优享版 无需手动抓取cookie
Lanzou Pro V1 接口列表 API状态版本路由获取文件与目录✅^1.0.1/v1/getFilesAndDirectories?url{}&page{}获取目录✅^1.0.0/v1/getDirectory?url{}获取文件✅^1.0.1/v1/getFiles?url{}&page{}搜索文件✅^1.0.0/v1/searchFile?url{}&wd{}依Id解析✅^1.0.2/v1/…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了:一行…...
深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出:JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中,随机数的生成看似简单,却隐藏着许多玄机。无论是生成密码、加密密钥,还是创建安全令牌,随机数的质量直接关系到系统的安全性。Jav…...
Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库,获取股票数据,并生成TabPFN这个模型 可以识别、处理的格式,写一个完整的预处理示例,并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务,进行预测并输…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流,定义在 <sstream> 中: std::istringstream:输入流,从已有字符串中读取并解析。std::ostringstream:输出流,向内部缓冲区写入内容,最终取…...
是否存在路径(FIFOBB算法)
题目描述 一个具有 n 个顶点e条边的无向图,该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序,确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数,分别表示n 和 e 的值(1…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)
船舶制造装配管理现状:装配工作依赖人工经验,装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书,但在实际执行中,工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

嵌入式学习笔记DAY33(网络编程——TCP)
一、网络架构 C/S (client/server 客户端/服务器):由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序,负责提供用户界面和交互逻辑 ,接收用户输入,向服务器发送请求,并展示服务…...

mac 安装homebrew (nvm 及git)
mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用: 方法一:使用 Homebrew 安装 Git(推荐) 步骤如下:打开终端(Terminal.app) 1.安装 Homebrew…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)
引言 在人工智能飞速发展的今天,大语言模型(Large Language Models, LLMs)已成为技术领域的焦点。从智能写作到代码生成,LLM 的应用场景不断扩展,深刻改变了我们的工作和生活方式。然而,理解这些模型的内部…...
xmind转换为markdown
文章目录 解锁思维导图新姿势:将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件(ZIP处理)2.解析JSON数据结构3:递归转换树形结构4:Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...