Flutter Widget原理（一）

2024-06-21 00:00:21

前言

使用过Flutter的同学，应该都听过一句话“everything is a widget——在Flutter中万物皆是Widget”。

这句话虽然不能说，Flutter开发所有代码模块都是一个Widget，但足以说明Widget在Flutter中的重要性，本篇文章就重点关于Flutter Widget的原理进行解读。

Widget简介

什么是Widget？我们先看一下官方的描述

“Describes the configuration for an [Element]”

在Flutter中，Widget的功能是“描述一个UI元素的配置数据”。

这句话很简单，如何理解呢？暂时可以简单的理解，FLutter最终绘制在设备上的显示元素，都是通过Widget配置出来的。

在web前端开发中，我们知道浏览器页面由HTML+CSS+JS配置而成，其中HTML负责配置UI结构，CSS负责配置UI样式，JS负责UI的交互。

而在Flutter中，无论是UI结构，还是UI样式，再到UI交互都是通过Widget完成。例如：

Widget树结构配置UI结构
样式Widget，Padding、Color等
交互Widget，GestureDetector等

Widget分类

在Flutter中，官方提供的原生Widget多达300+，这么多Widget，在基础原理层面是如何分类的呢？

使用过Flutter的同学&#

Flutter Widget原理（一）相关推荐

拆！对比详解 Flutter Widget 和 CSS，你关心的布局原理都在这儿了
简介: 这篇文章专门对比 Flutter Widget 的布局原理和 CSS 布局原理的差异,分享在对接过程中会遇到的问题和解决方案,帮大家理一理思路,内容可以分为这几部分:1.CSS 和 Widge ...
Flutter 核心原理与混合开发模式
作者:airingdeng,腾讯QQ前端开发工程师本文将从 Flutter 原理出发,详细介绍 Flutter 的绘制原理,借由此来对比三种跨端方案:之后再进入第三篇章 Flutter 混合开发模式 ...
Flutter Widget嵌套深，修改代码麻烦？
Flutter Widget嵌套深,修改代码麻烦? 背景解决方法代码修改 pubspec.yaml 以支持 Extension: Widget扩展代码: 实际使用: 背景许多人初次接触Flut ...
Flutter Widget详解
Flutter Widget详解 Widget是Flutter应用程序用户界面的基本构建块.每个Widget都是用户界面一部分的不可变声明. 与其他将视图.控制器.布局和其他属性分离的框架不同,Flu ...
国内少有的Flutter干货分享：Flutter的原理及美团的实践！
关注公众号"风色年代"订阅更多精彩文章,本博大部分文章为转载并已标明原文出处,如有再转敬请保留,请自觉尊重原创作者的劳动成果! 原文:http://blog.itpub.net/3 ...
Flutter 路由原理解析
前言这一次,我尝试以不贴一行源代码的方式向你介绍 Flutter 路由的实现原理,同时为了提高你阅读源码的积极性,除了原理介绍以外,又补充了两个新的模块:从源码中学习到的编程技巧,以及阅读源码之后 ...
Flutter 实现原理及跨平台实践
一直以来,跨平台开发都是困扰移动客户端开发的难题. 在马蜂窝旅游 App 很多业务场景里,我们尝试过一些主流的跨平台开发解决方案, 比如WebView 和 React Native,来提升开发效率和用 ...
Flutter 笔记 | Flutter 核心原理（一）架构和生命周期
Flutter 架构简单来讲,Flutter 从上到下可以分为三层:框架层.引擎层和嵌入层,下面我们分别介绍: 1. 框架层 Flutter Framework,即框架层.这是一个纯 Dart实现的 ...
Flutter 实现原理及在马蜂窝的跨平台开发实践
一直以来,跨平台开发都是困扰移动客户端开发的难题. 在马蜂窝旅游 App 很多业务场景里,我们尝试过一些主流的跨平台开发解决方案, 比如WebView 和 React Native,来提升开发效率和用 ...

最新文章

热门文章