Flutter UI布局方式

Flutter采用声明式UI布局方式

  1. 为什么是声明式UI

从win32到web再到Android和iOS的框架通常使用命名式UI编辑风格,手动构建UI实体,在需要变更时通过实体方法对其进行改变。为减轻开发人员在各种UI状态直接变更的编程负担,flutter让开发人员描述当前的UI状态,并且不需要关心它是如何过渡到框架的。

  1. 如何在声明性框架中更改布局

在声明式UI,视图配置(如Flutter中的widget)是不可变的,并且只是轻量级的'蓝图',类似于iOS的UIView,Widget会在自身上触发重建(类似iOS中的drawreact),最常见的是通过Flutter中StatefulWidgets上调用setState(),并构建一个新的Widget树

return View {
    color: red,
    child: ViewChild(...)
}

在这里,Flutter构建新的Widget实例,而不是改变旧实例。该框架使用RenderObjects管理传统对象的许多职责(例如维护布局状态)。RenderObjects在帧之间保持不变,Flutter的轻量级Widget告诉框架在状态之间改变RenderObjects,接下来Flutter框架会处理其他部分。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容