Flutter鸿蒙next 布局架构原理详解

✅近期推荐:求职神器

https://bbs.csdn.net/topics/619384540


🔥欢迎大家订阅系列专栏:flutter_鸿蒙next
💬淼学派语录:只有不断的否认自己和肯定自己,才能走出弯曲不平的泥泞路,因为平坦的大路,太tm无趣了!

目录

写在前面

一、Flutter 布局的基本概念

二、主要布局 Widget 详解

1. Row 布局

使用示例

关键属性

布局原理

2. Column 布局

使用示例

关键属性

布局原理

3. Stack 布局

使用示例

关键属性

布局原理

4. Container

使用示例

关键属性

布局原理

5. ListView 和 GridView

ListView 示例

GridView 示例

布局原理

三、布局优化技巧

写在最后


写在前面

在 Flutter 中,布局是构建用户界面的核心部分。Flutter 提供了丰富的布局组件,能够灵活地组合和排列 Widget,创建出多种多样的界面效果。本文将详细介绍 Flutter 中的主要布局方式,包括 RowColumnStack 和其他布局 Widget 的架构原理及使用场景。

一、Flutter 布局的基本概念

在深入布局 Widget 之前,了解 Flutter 布局的基本概念非常重要。

  • Widget:Flutter 的基本构件,所有 UI 元素都是 Widget,分为无状态 Widget(Stateless)和有状态 Widget(Stateful)。
  • 约束 (Constraints):Flutter 的布局是基于约束的,父 Widget 将约束传递给子 Widget,决定子 Widget 的大小和位置。
  • 布局过程:布局过程分为两个阶段:布局阶段和绘制阶段。在布局阶段,Widget 根据约束计算自己的大小;在绘制阶段,Widget 被绘制到屏幕上。

二、主要布局 Widget 详解

1. Row 布局

Row 是 Flutter 中用于水平排列子 Widget 的布局组件。它允许将多个 Widget 水平放置,并支持各种对齐和间距设置。

使用示例
Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [Icon(Icons.star),Text('Star'),Icon(Icons.star),],
)
关键属性
  • mainAxisAlignment:主轴对齐方式,如 MainAxisAlignment.startMainAxisAlignment.centerMainAxisAlignment.spaceBetween 等。
  • crossAxisAlignment:交叉轴对齐方式,如 CrossAxisAlignment.startCrossAxisAlignment.center 等。
  • children:子 Widget 列表。
布局原理

在布局过程中,Row 接收来自父 Widget 的约束,并将其分发给每个子 Widget。根据设定的对齐方式,Row 会自动计算每个子 Widget 的位置。

2. Column 布局

Column 用于垂直排列子 Widget,工作原理与 Row 类似,但方向不同。

使用示例
Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text('Hello'),Text('World'),],
)
关键属性
  • mainAxisAlignment:主轴对齐方式,类似于 Row
  • crossAxisAlignment:交叉轴对齐方式,控制子 Widget 的水平对齐。
  • children:子 Widget 列表。
布局原理

Column 将父 Widget 的约束传递给每个子 Widget,并根据主轴和交叉轴的对齐属性计算它们的大小和位置。

3. Stack 布局

Stack 允许多个 Widget 重叠显示,适合用于需要图层叠加的场景,比如图片上叠加文字或图标。

使用示例
Stack(alignment: Alignment.center,children: [Image.network('https://example.com/image.png'),Text('Overlay Text', style: TextStyle(color: Colors.white)),],
)
关键属性
  • alignment:决定子 Widget 的对齐方式。
  • children:子 Widget 列表。
布局原理

Stack 不会对子 Widget 的大小施加约束,所有子 Widget 都会被放置在同一位置上。可以使用 Positioned Widget 来设置子 Widget 的具体位置。

4. Container

Container 是一个功能强大的 Widget,常用于控制大小、边距、填充、背景和边框等。

使用示例
Container(width: 100,height: 100,padding: EdgeInsets.all(8.0),decoration: BoxDecoration(color: Colors.blue,borderRadius: BorderRadius.circular(8.0),),child: Center(child: Text('Container')),
)
关键属性
  • width 和 height:设置容器的宽高。
  • padding:内边距。
  • margin:外边距。
  • decoration:用于设置背景、边框等样式。
布局原理

Container 会根据父 Widget 的约束计算自己的大小。它会优先使用传入的宽高参数,然后根据子 Widget 的大小进行调整。

5. ListView 和 GridView

这两个组件用于创建可滚动的列表和网格布局。

ListView 示例
ListView(children: [ListTile(title: Text('Item 1')),ListTile(title: Text('Item 2')),],
)
GridView 示例
GridView.count(crossAxisCount: 2,children: [Container(color: Colors.red, height: 100),Container(color: Colors.green, height: 100),],
)
布局原理
  • ListView:通过懒加载机制,只渲染当前可见的部分,提升性能。
  • GridView:根据列数 (crossAxisCount) 将 Widget 布局成网格。

三、布局优化技巧

在 Flutter 中,优化布局可以显著提高应用的性能,以下是一些常用的布局优化技巧:

  1. 使用 const 构造函数:如果 Widget 不会变化,可以使用 const 构造函数来减少重建的开销。
  2. 避免过度嵌套:复杂的 Widget 树会影响性能,尽量减少 Widget 的层级。
  3. 使用 LayoutBuilder:根据父 Widget 的约束动态构建子 Widget,避免不必要的重绘。

写在最后

Flutter 的布局架构灵活而强大,通过组合使用各种布局 Widget,可以轻松构建出复杂的用户界面。了解各个布局 Widget 的原理及其适用场景,将帮助开发者在构建 Flutter 应用时更加高效和灵活。希望这篇博客能为你在 Flutter 布局方面的学习提供帮助!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/56754.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【mysql】转义字符反斜杠,正则表达式

1.mysql插入 1.1插入-反斜杠规则: ​ 在MySQL中,反斜杠在字符串中是属于转义字符,经过语法解析器解析时会进行一次转义,所以当我们insert反斜杠(\)字符时,如 insert “\” 在数据库中最…

[JAVAEE] 多线程的案例(三) - 线程池

目录 一. 什么是线程池 二. 线程池的作用 三. java提供的线程池类 四. ThreadPoolExecutor的构造方法及参数理解 1. int corePoolSize: 核心线程数. 2. int maximumPoolSize: 最大线程数 核心线程数 非核心线程数 3. int keepAliveTime:非核心线程允许空闲的最大时间. …

DataX简介及使用

目录 一、DataX离线同步工具DataX3.0介绍 1.1、 DataX 3.0概览 1.2、特征 1.3、DataX3.0框架设计 1.4、支持的数据元 1.5、DataX3.0核心架构 1.6、DataX 3.0六大核心优势 1.6.1、可靠的数据质量监控 1.6.2、丰富的数据转换功能 1.6.3、精准的速度控制 1.6.4、强劲的…

第五十四章 安全元素的详细信息 - DerivedKeyToken 详情

文章目录 第五十四章 安全元素的详细信息 - <DerivedKeyToken> 详情详情消息中的位置 第五十四章 安全元素的详细信息 - 详情 <DerivedKeyToken> 的目的是携带发送者和接收者可以独立使用的信息来生成相同的对称密钥。这些方可以使用该对称密钥对 SOAP 消息的相关…

正则表达式和通配符

文章目录 正则表达式和通配符的区别正则表达式&#xff08;Regex&#xff09;通配符&#xff08;Wildcards&#xff09;总结 正则表达式的概念正则表达式的由来为什么要使用正则表达式 正则表达式的语法组成修饰符元字符\f\b\B 在Linux中的基础正则和扩展正则基础正则(BRE)^$.*…

人脸应用实例:性别年龄预测

在当今科技飞速发展的时代&#xff0c;人脸识别技术已经从科幻电影走进了我们的日常生活。通过算法来识别人脸的特征&#xff0c;进而判断身份、年龄和性别&#xff0c;这一技术正逐步改变着我们的生活方式。今天&#xff0c;我们就来探讨一下基于深度学习的人脸应用实例——性…

面试时被问到“Scaling Law”,该怎么答?

在大模型的研发中&#xff0c;通常会有下面一些需求&#xff1a; 计划训练一个 10B 的模型&#xff0c;想知道至少需要多大的数据&#xff1f; 收集到了 1T 的数据&#xff0c;想知道能训练一个多大的模型&#xff1f; 老板准备 1 个月后开发布会&#xff0c;给的资源是 100 …

vue父子传参的方式——Prop

Prop 每一个组件都有一个props的属性&#xff0c;用来接收外部传递的数据 这里我拿一个分页组件为例&#xff1a; 一、基础语法 1、父组件传递数据 父组件在向子组件传递数据时&#xff0c;基础语法如下&#xff1a; <template><div><common-page :pagina…

Linux安装Nginx教程(rpm安装方式)

本章教程,主要介绍如何在Linux Centos7系统上,使用rpm的方式进行安装Nginx。 一、安装wget插件 如果不存在wget下载插件,需要安装一下。 yum install -y wget二 、下载rpm安装包 官方提供的rpm下载地址:https://nginx.org/packages/centos/7/x86_64/RPMS/ <

【Nginx系列】499错误

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

Java面试题——计网篇2

1.get和post请求的区别 用途不同&#xff1a; GET请求用于从服务器获取数据&#xff0c;它不会改变服务器上的数据。POST请求用于向服务器提交数据&#xff0c;通常用于修改服务器上的数据。 数据传输方式不同&#xff1a; GET请求将数据附加在URL后面&#xff0c;通过问号(?)…

Postman常见问题及解决方(全)

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 1、网络连接问题 如果Postman无法发送请求或接收响应&#xff0c;可以尝试以下操作&#xff1a; 检查网络连接是否正常&#xff0c;包括检查网络设置、代理设置…

软考中级嵌入式系统设计师笔记分享(二)

1.TTL 电路是电流控制器件&#xff0c;而CMOS 电路是电压控制器件。 2.TTL 电路的速度快&#xff0c;传输延迟时间短(5-10ns)&#xff0c;但是功耗大。 常见的串行总线有 SPI、II2C、USB、RS232/RS422/RS485、CAN等;高速串行总线主要有 SATA、PCIE、IEEE 1394、Rapidl0、USB 3…

1.DBeaver连接hive数据库

1.hive开启远程服务&#xff0c;linux中直接输入&#xff1a;hiveserver2 2.解压dbeaver和hive-jdbc-2.1.1.zip 3.双击打开 4.数据库&#xff0c;新建连接 5.搜索hive 6.配置参数 7.编辑驱动设置 8.添加jar包 9.测试连接 10.右击&#xff0c;新建sql编辑器 11.执行sql 12.调整字…

在linux中arm-linux-gcc和/usr/bin/gcc有啥区别

在Linux中&#xff0c;arm-linux-gcc和/usr/bin/gcc都是编译器&#xff0c;但它们之间存在显著的区别&#xff0c;主要体现在编译目标、使用场景以及编译生成的二进制文件的可执行性上。而软链接则是Linux文件系统中的一种特殊文件类型&#xff0c;用于创建一个文件的别名。 a…

高级java每日一道面试题-2024年10月24日-JVM篇-说一下JVM有哪些垃圾回收器?

如果有遗漏,评论区告诉我进行补充 面试官: 说一下JVM有哪些垃圾回收器? 我回答: 1. Serial收集器 特点&#xff1a;Serial收集器是最古老、最稳定的收集器&#xff0c;它使用单个线程进行垃圾收集工作。在进行垃圾回收时&#xff0c;它会暂停所有用户线程&#xff0c;即St…

【每日一题】LeetCode - 整数转罗马数字

在罗马数字系统中&#xff0c;七个不同的符号代表不同的值&#xff1a; 符号值I1V5X10L50C100D500M1000 罗马数字的表示方式是从最大值开始逐次减去每个符号的值&#xff0c;通过组合这些符号构建最终的表示形式。本文将介绍一个基于贪心策略的解决方案&#xff0c;将整数转换…

unity开发之Line Renderer

Line Renderer 是一个有用的工具&#xff0c;可让您在游戏中绘制线条。 它可以用作游戏的函数或调试标记。 在这里&#xff0c;让我们创建一个程序&#xff0c;根据基本用法在 Line Renderer 上移动。 目录 如何使用 Line Renderer 和基础知识 在场景中放置 Line Renderer关键组…

音视频同步版本【基于音频】

其实和基于外部时钟的原理操作基本上一模一样。只不过音频帧不需要去匹配现实时钟了&#xff0c;只有视频帧需要匹配现实时钟。而视频帧需要去匹配音频帧的时间&#xff0c;那么就需要给时钟设置一个补偿&#xff0c;因为现在是以音频帧为标准。假如现在现实时钟到了50pts&…

Catalan数 C++解决

输入描述 输入一个正整数n。 输出描述 输出Catalan数的前n项。 用例输入 1 0 用例输出 1 1 用例输入 2 5 用例输出 2 1 1 2 5 14 42 #include<bits/stdc.h> using namespace std; int main() {int n;cin>>n;int dp[n1]{0};dp[0]dp[1]1;for(int m2;…