Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比

一、Flutter 的 Widget 概述

Flutter 是 Google 开发的一款开源 UI 框架,旨在帮助开发者快速构建高性能、高保真度的移动、Web 和桌面应用程序。在 Flutter 中,UI 的构建完全是通过 Widget 来实现的。Widget 是 Flutter 中所有用户界面元素的基础构建块。每一个 UI 元素,无论是文本、按钮、图片,甚至是容器、行列布局等,都是通过 Widget 构造出来的。

Flutter 的 Widget 并不等同于传统的视图(view)控件,它不仅代表了界面元素的外观,还描述了其行为。在 Flutter 中,Widget 是不可变的,每当 UI 需要更新时,Flutter 会创建新的 Widget 树并将其与之前的 Widget 树进行对比,然后进行高效的更新。

Flutter 的 Widget 树呈现出高度的灵活性与可组合性,几乎每个 Widget 都可以嵌套和组合形成更复杂的 UI。常见的 Widget 分类包括以下几种:

  1. 结构型 Widget:用于布局和组织其它 Widget,例如 ContainerColumnRowStack
  2. 呈现型 Widget:用于显示内容或界面元素,例如 TextImageIcon
  3. 交互型 Widget:处理用户输入和交互,例如 GestureDetectorElevatedButton
  4. 状态管理 Widget:用于管理和更新 UI 状态,例如 StatefulWidgetInheritedWidget
二、常用 Flutter Widgets

以下是 Flutter 中一些常用 Widget 的简介和用途:

  1. Text Widget:用于显示文本。

    Text('Hello, Flutter!', style: TextStyle(fontSize: 24));
    

    Text Widget 用于渲染文本内容,通过 TextStyle 来定义样式。

  2. Container Widget:用于创建一个容器,可以设置宽高、边距、内边距、背景色等。

    Container( width: 100, height: 100, color: Colors.blue, );

    Container 是最常用的布局容器之一,具有灵活的可配置属性。

  3. Row 和 Column Widget:用于水平和垂直排列子 Widget。

    Row( children: <Widget>[ Icon(Icons.star), Text('Flutter'), ], );

    Row 是水平布局,Column 是垂直布局,它们非常适合实现线性布局。

  4. Stack Widget:用于层叠布局,可以将 Widget 按照层次叠加。

    Stack(children: <Widget>[Positioned(top: 10, left: 10, child: Icon(Icons.star)),Positioned(bottom: 10, right: 10, child: Text('Stacked Text')),],
    );
    
     

    Stack 可以使多个 Widget 层叠在一起,通常用于实现浮动效果。

  5. ElevatedButton Widget:用于创建带有阴影的按钮。

    ElevatedButton(onPressed: () {print('Button Pressed');},child: Text('Click Me'),
    );
    
     

    ElevatedButton 提供了一个标准的按钮外观,通常用于触发事件。

三、Flutter 与 鸿蒙 Next 的对比

鸿蒙 OS(HarmonyOS)是华为开发的一款分布式操作系统,目标是通过跨设备协同和统一的开发平台,连接不同的硬件设备。鸿蒙 Next 是鸿蒙系统中一个用于构建用户界面的框架,其核心思想与 Flutter 类似,都是基于组件化的 UI 构建。

  1. 组件化架构:Flutter 和鸿蒙 Next 都是基于组件化的 UI 构建框架,采用声明式 UI 风格。Flutter 中的 Widget 和鸿蒙 Next 中的组件都是 UI 的基本单元,通过组合和嵌套不同的组件来构建完整的界面。

  2. 开发语言:Flutter 使用 Dart 语言,而鸿蒙 Next 使用的是基于 JavaScript 或 Java 的编程语言。Flutter 的优势在于 Dart 语言与 Flutter 框架高度集成,开发者可以通过 Dart 的异步操作等特性来高效地开发应用。

  3. 布局系统:Flutter 提供了强大的布局系统,如 RowColumnStack 等基础 Widget,灵活地支持响应式布局。鸿蒙 Next 也有类似的布局组件,比如 ColumnFlexStack,但其组件的实现和 Flutter 的不同,更多的针对鸿蒙的多设备场景做了优化。

  4. 性能:Flutter 采用的是 Skia 渲染引擎,渲染速度非常快,能够在各个平台上获得一致的性能表现。鸿蒙 Next 的渲染系统采用了 HarmonyOS 自有的图形渲染技术,同样有着较强的性能优化,特别是在多设备协同方面表现优秀。

  5. 跨平台支持:Flutter 原生支持 Android、iOS、Web 和桌面平台。而鸿蒙 Next 作为鸿蒙 OS 的一部分,能够更好地支持包括手机、电视、穿戴设备等多种硬件平台,且更具分布式特性。

四、Flutter 示例代码解析

为了更好地理解 Flutter 的 Widget 机制,以下是一个简单的示例代码,展示了如何使用常见的 Flutter Widgets 构建一个简单的页面。

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Flutter Demo')),body: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Icon(Icons.star, size: 50, color: Colors.orange),Text('Flutter is Awesome!', style: TextStyle(fontSize: 24)),ElevatedButton(onPressed: () {print('Button Pressed');},child: Text('Click Me'),),],),),);}
}

代码解析:

  1. MyApp:这是 Flutter 应用的入口。MyApp 继承自 StatelessWidget,表示这个 Widget 没有可变状态。build 方法返回一个 MaterialApp,它是一个 Material 风格的应用框架,负责设置应用的主题、路由等。

  2. MaterialAppScaffoldMaterialApp 是一个顶级 Widget,表示应用的基本框架。Scaffold 提供了一个基础的页面结构,包括 AppBar(应用的顶部栏)和 body(页面主体内容)。在 body 部分,使用了一个 Column 布局来垂直排列子 Widget。

  3. ColumnColumn 布局将其子元素按垂直方向排列。我们在 Column 中嵌套了三个 Widget:一个 Icon(图标),一个 Text(文本),以及一个 ElevatedButton(按钮)。这些元素按照垂直顺序显示在屏幕上。

  4. ElevatedButtonElevatedButton 是一个带阴影的按钮,点击后会触发 onPressed 回调,在回调中打印一条消息。

五、总结

Flutter 和鸿蒙 Next 都是现代化的 UI 框架,分别在移动端和多设备场景中具有各自的优势。Flutter 借助其丰富的 Widget 库、灵活的布局系统和高效的渲染引擎,在跨平台开发中表现出色。鸿蒙 Next 则强调跨设备、分布式协同和高性能,在硬件设备多样性的支持方面具有独特优势。

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

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

相关文章

【python】Flask

文章目录 1、Flask 介绍2、Flask 实现网页版美颜效果3、参考 1、Flask 介绍 Flask 是一个用 Python 编写的轻量级 Web 应用框架。它设计简单且易于扩展&#xff0c;非常适合小型项目到大型应用的开发。 以下是一些 Flask 库中常用的函数和组件&#xff1a; 一、Flask 应用对…

FastAPI —— 请求参数验证

1.hello world 给后端船数据 hello world 接口给后端传 COVID-19 感染数据_高性能 FastAPI 框架入门精讲-慕课网 #!/usr/bin/python3 # -*- coding:utf-8 -*- # __author__ __Jack__from typing import Optionalfrom fastapi import FastAPI from pydantic import BaseModel…

产品经理如何使用项目管理软件推进复杂项目按时上线

前言 相信很多产品同学或多或少都有过这样的经历&#xff1a;平时没有听到任何项目延期风险&#xff0c;但到了计划时间却迟迟无法提测……评审时没有任何argue&#xff0c;提测后发现开发的功能不是自己想要的……费劲九牛二虎之力终于让项目上线了&#xff0c;然而发现成果达…

新系统如何进行模型环境配置

在机器学习和深度学习中&#xff0c;一个良好的开发环境能够显著提高工作效率。本篇博客将详细介绍如何在新的Linux系统&#xff08;以Ubuntu为例&#xff09;上进行模型环境的配置&#xff0c;包括基础系统设置、Python虚拟环境搭建、常用库的安装以及GPU驱动和CUDA的安装等。…

机器视觉:轮廓匹配算法原理

轮廓匹配的模板变量主要包括模板图像&#xff08;Template&#xff09;和待检测图像&#xff08;Source Image&#xff09; 在轮廓匹配中&#xff0c;模板变量主要包括一下几个关键部分&#xff1a; ‌模板图像&#xff08;Template&#xff09;‌&#xff1a;这是进行匹配的…

OpenAI大事记;GPT到ChatGPT参数量进化

目录 OpenAI大事记 GPT到ChatGPT参数量进化 OpenAI大事记 GPT到ChatGPT参数量进化 ChatGPT是从初代 GPT逐渐演变而来的。在进化的过程中,GPT系列模型的参数数量呈指数级增长,从初代GPT的1.17亿个参数,到GPT-2的15 亿个参数,再到 GPT-3的1750 亿个参数。模型越来越大,训练…

STM32移植RT-Thread---时钟管理

一RTT时钟节拍概念 RT-Thread的时钟节拍&#xff08;Tick&#xff09;是操作系统用于管理时间和任务调度的一个基本单位。它在实时操作系统中尤为关键&#xff0c;用于实现任务的延时、超时管理等功能。以下是关于RT-Thread时钟节拍的简单说明&#xff1a; 1.Tick定义&#x…

Am I Isolated:一款安全态势基准测试工具

基于Rust的容器运行时扫描器作为一个容器运行&#xff0c;检测用户容器运行时隔离中的漏洞。 它还提供指导&#xff0c;帮助用户改善运行时环境&#xff0c;以提供更强的隔离保证。 容器的现状是它们并不包含&#xff08;隔离&#xff09;。 容器隔离的缺失在云原生环境中有…

SQLite的BLOB数据类型与C++二进制存储学习记录

一、BLOB数据类型简介 Blob&#xff08;Binary Large Object&#xff09;是一种用于存储二进制数据的数据类型&#xff0c;在数据库中常用于存储图片、音频和视频等大型&#xff08;大数据量&#xff09;的二进制数据[1-2]。需要注意的是&#xff0c;SQLite中BLOB类型的单对象最…

编写一个基于React的聊天室

前言 此前已经编写了一版后端的im&#xff0c;此次就用其作为服务端&#xff0c;可查看参考资料1 代码 使用WebStorm创建React项目 安装依赖包 PS C:\learn-demo\front\chatroom> npm installadded 183 packages, and audited 184 packages in 16s43 packages are looki…

Javascript事件循环流程分析

基础概念 事件循环&#xff08;Event Loop&#xff09;&#xff1a;事件循环是JavaScript运行时环境中的一个循环机制&#xff0c;它不断地检查调栈用和任务队列。当调用栈为空时&#xff0c;事件循环会首先检查微任务队列&#xff0c;并执行其中的所有任务。只有当微任务队列…

解决使用Golang的email库发送qq邮件报错short response,错误类型为textproto.ProtocolError

问题阐述 使用email库发送QQ邮件&#xff0c;采用587端口&#xff1a; package mainimport ("fmt""net/smtp""github.com/jordan-wright/email" )func SendEmail(sendTo string, subject string, body string) (err error) {e : email.NewEmai…

ENAS和DARTs的比较

ENAS&#xff08;Efficient Neural Architecture Search&#xff09;和DARTS&#xff08;Differentiable Architecture Search&#xff09;都是神经架构搜索&#xff08;NAS&#xff09;的有效方法&#xff0c;目标是自动化地找到高性能的神经网络结构。尽管它们都旨在解决NAS的…

题目:Wangzyy的卡牌游戏

登录 - XYOJ 思路&#xff1a; 使用动态规划&#xff0c;设dp[n]表示当前数字之和模三等于0的组合数。 状态转移方程&#xff1a;因为是模三&#xff0c;所以和的可能就只有0、1、2。等号右边的f和dp都表示当前一轮模三等于k的组合数。以第一行为例&#xff1a;等号右边表示 j转…

mysql数据库命令备份和同步

使用mysqldump备份192.168.1.198服务上的test_db数据库 mysqldump --column--statistics0 --set-gtid-purgedOFF -uroot -h 192.168.1.198 -p123456 test_db > /use/local/sql_bak/test_db.sql** 使用mysql再192.168.1.199服务上执行数据库备份文件 ** mysql -h 192.168…

ARM64的Mac Node.js前置工作,nvm在线安装

1&#xff0c;通过 终端 ping raw.githubusercontent.com 获取到ip地址185.199.110.133 2&#xff0c;终端输入sudo vi /etc/hosts&#xff0c;打开hosts文件 3&#xff0c;在最后添加 185.199.110.133 raw.githubusercontent.com 保存后退出 3.1&#xff0c;清除环境 完全…

【支付行业-支付系统架构及总结】

记得第一次看埃隆马斯克&#xff08;Elon Musk&#xff09;讲第一性原理的视频时&#xff0c;深受震撼&#xff0c;原来还可以这样处理复杂的事务。这篇文章也尝试化繁为简&#xff0c;探寻支付系统的本质&#xff0c;讲清楚在线支付系统最核心的一些概念和设计理念。 虽然支付…

模块化沙箱:深信达如何为数据安全提供全方位保护

在数字化时代&#xff0c;网络安全已经成为企业和个人不可忽视的重要议题。随着网络攻击手段的日益复杂和多样化&#xff0c;传统的安全防护措施已经难以应对日益严峻的安全挑战。在这样的背景下&#xff0c;模块化沙箱技术应运而生&#xff0c;成为网络安全领域的新宠。今天&a…

基于单片机的观赏类水草养殖智能控制系统的设计(论文+源码)

1总体设计 通过需求分析&#xff0c;本设计观赏类水草养殖智能控制系统的总体架构如图2.1所示&#xff0c;为系统总体设计框图。系统采用STM32单片机作为系统主控核心&#xff0c;利用DS18B20温度传感器、TDS传感器、CO2传感器、光敏传感器实现水草养殖环境中水温、CO2浓度、T…

基于Jeecgboot3.6.3vue3的flowable流程增加online表单的审批支持(四)online表单字段控制

更多技术支持与服务请加入我的知识星球或加我微信,名称:亿事达nbcio技术交流社区https://t.zsxq.com/iPi8F 1、首先需要配置操作规则,如下: 配置这个节点的一些字段属性,上面就是有两个隐藏了,一个可以编辑,上面的规则采用json格式保存到数据库里 2、取出这些规则 //根…