当前位置: 首页 > news >正文

【Flutter】页面布局:层叠布局(Stack、Positioned)

在 Flutter 中,布局系统提供了多种方式来管理 UI 元素的排列方式。其中,StackPositioned 是非常重要的布局组件,允许开发者将子组件按层叠方式(即堆叠)布局,使得组件可以相互重叠。通过使用 StackPositioned,可以轻松实现复杂的界面效果,如悬浮按钮、页面上的层次关系、背景覆盖等。

本教程将详细介绍 StackPositioned 的工作原理、常见使用场景,并通过实例展示如何在 Flutter 中实现灵活的层叠布局。

什么是层叠布局?

Stack 是 Flutter 中的一个布局组件,允许多个子组件按照堆叠顺序展示,也就是说,后添加的子组件会覆盖前面的子组件。与其他布局不同,Stack 不会自动调整子组件的位置,而是将子组件彼此叠加放置。

PositionedStack 的子组件之一,用来精确控制子组件在 Stack 中的位置。通过 Positioned,可以指定子组件相对于 Stack 边缘的位置,如 topbottomleftright 等。

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 的使用

PositionedStack 的子组件之一,专门用于在 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 中任意定位子组件。

StackPositioned 的复杂布局实例

通过结合 StackPositioned,我们可以实现一些复杂的 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),),),],),),);}
}

这个例子展示了如何使用 StackPositioned 来创建一个具有背景图片、中心文本以及悬浮按钮的页面布局。通过 Positioned.fill,我们让背景图片占据整个 Stack,同时使用 Center 来将文本居中显示,最后在页面的右下角放置一个悬浮按钮。

StackPositioned 的高级用法

除了基础用法,StackPositioned 还可以与 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 中,StackPositioned 为开发者提供了灵活的层叠布局方式,特别适用于需要子组件重叠或在页面上悬浮的场景。通过结合使用 alignmentfit 等属性以及 Positioned 子组件,开发者可以轻松实现复杂的 UI 布局。

掌握 StackPositioned 的使用,能大大增强 Flutter 应用的布局能力,为构建美观且功能强大的界面提供更多可能性。

相关文章:

【Flutter】页面布局:层叠布局(Stack、Positioned)

在 Flutter 中&#xff0c;布局系统提供了多种方式来管理 UI 元素的排列方式。其中&#xff0c;Stack 和 Positioned 是非常重要的布局组件&#xff0c;允许开发者将子组件按层叠方式&#xff08;即堆叠&#xff09;布局&#xff0c;使得组件可以相互重叠。通过使用 Stack 和 P…...

SpringBoot实现的汽车票在线预订系统

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

集合框架14:TreeSet概述、TreeSet使用、Comparator接口及举例

视频链接&#xff1a;13.29 TreeSet概述_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1zD4y1Q7Fw?spm_id_from333.788.videopod.episodes&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5&p29 1、TreeSet概述 基于排列顺序实现元素不重复&#xff1b;实现了Sort…...

uniapp获取底部导航tabbar的高度(H5)

uniapp获取底部导航tabbar的高度&#xff08;H5&#xff09; <view :style"bottom: tabBarHeight px;"> </view>tabBarHeight: 0, // 底部tabBar高度&#xff0c; h5// #ifdef H5 getTabBarHeight(){const systemInfo uni.getSystemInfoSync()this.t…...

接口测试 —— 如何测试加密接口?

接口加密是指在网络传输过程中&#xff0c;将数据进行加密&#xff0c;以保护数据的安全性。接口加密可以采用多种加密算法&#xff0c;如AES、DES、RSA等。测试接口加密的目的是验证接口加密算法的正确性和安全性。以下是一些详细的测试方法和注意事项&#xff1a; 接口加密字…...

033 商品搜索

文章目录 SearchController.javaPage.javaSpuInfoServiceImpl.javaSpuInfoService.javaCubemallSearchApplication.javasearch.htmlpom.xml 功能分析 页面回显的数据&#xff1a; searchMap keywords&#xff1a;搜索的关键词 brand&#xff1a;过滤条件-品牌 category&…...

身份证二要素实名认证接口-身份证核验接口-身份证实名API

接口简介&#xff1a;企业三要素验证&#xff0c;输入公司名称、统一社会信用代码、法人姓名验证是否一致 接口地址&#xff1a;https://www.wapi.cn/api_detail/62/169.html 在线核验&#xff1a;https://www.wapi.cn/icardauth.html 网站地址&#xff1a;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. 创建数据库 语法&#xff1a; CREATE DATABASE [IF NOT EXISTS] db_name [create_specification...];//create_specification包括&#xff1a;[DEFAULT] CHARACTER SET charset_name[DEFAULT] COLLATE collation_n…...

java集合进阶篇-《泛型》

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

pytorh学习笔记——cifar10(三)模仿VGGNet创建卷积网络

VGG16是由牛津大学视觉几何组&#xff08;Visual Geometry Group&#xff09;提出的一种深度卷积神经网络模型。 VGGNet 探索了卷积神经网络的深度与其性能之间的关系&#xff0c;成功地构筑了 16~19 层深的卷积神经网络&#xff0c;同时拓展性又很强&#xff0c;迁移到其它图片…...

题目:连续子序列

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

深入解析:Nacos AP 模式的实现原理与应用场景

优质博文&#xff1a;IT-BLOG-CN 一、CAP 基础 ‌Nacos作为注册中心同时支持CP和AP模式。‌ Nacos通过不同的协议和机制来实现这两种模式&#xff0c;以满足不同的需求场景。 在Nacos中&#xff0c;默认情况下使用的是AP模式&#xff0c;通过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线程 | 同步与互斥 | 互斥(下)

前言&#xff1a;本篇文章主要讲述linux线程的互斥的知识。 讲解流程为先讲解锁的工作原理&#xff0c; 再自己封装一下锁并且使用一下。 做完这些就要输出一堆理论性的东西&#xff0c; 但博主会总结两条结论&#xff01;&#xff01;最后就是讲一下死锁。 那么&#xff0c; 废…...

2024-10-17 问AI: [AI面试题] 讨论 AI 的挑战和局限性

文心一言 AI&#xff08;人工智能&#xff09;虽然取得了显著的进步&#xff0c;但仍面临多方面的挑战和局限性。以下是对AI挑战和局限性的详细讨论&#xff1a; 一、数据质量与可靠性 数据质量&#xff1a;AI系统依赖于高质量的数据进行训练和学习。如果数据质量低劣或包含…...

go基础(一)

包声明引入包函数变量语句&表达式注释 package main//包声明import "fmt"//引入包 //函数 func main() {/* 这是我的第一个简单的程序 */fmt.Println("Hello, World!") }基础语法 标记 go程序可以由多个标记组成&#xff0c;可以是关键字&#xff0…...

python忽略warnings 的方法

我在训练深度学习模型的时候一直出现这样的警告&#xff0c;但是不影响运行&#xff1a; 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 资源 论文绘图神器来了&#xff1a;一行…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

mac 安装homebrew (nvm 及git)

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

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

xmind转换为markdown

文章目录 解锁思维导图新姿势&#xff1a;将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件&#xff08;ZIP处理&#xff09;2.解析JSON数据结构3&#xff1a;递归转换树形结构4&#xff1a;Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...