写给Android工程师的声明式UI快速指北

最新推荐文章于 2025-05-27 20:13:19 发布
最新推荐文章于 2025-05-27 20:13:19 发布
阅读量615 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Android Flutter 文章标签： android ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Coo123_/article/details/132710247
本文为帮助原生开发人员从命令式UI到声明式UI转变，分享Flutter和Jetpack Compose学习笔记。涵盖Jetpack Compose构建Android UI及实战演练，还有Flutter的Dart语言、组件原理等内容，文末可获取完整文档。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Compose推出之初，就曾引发广泛的讨论，其中一个比较普遍的声音就是——“🤨这跟Flutter也长得太像了吧？！”

这里说的长得像，实际更多指的是UI编码的风格相似，而关于这种风格有一个专门的术语，叫做声明式UI。

对于那些已经习惯了命令式UI的Android或iOS开发人员来说，刚开始确实很难理解什么是声明式UI。

就像当初刚踏入编程领域的我们，同样也很难理解面向过程编程和面向对象编程的区别一样。

为了帮助这部分原生开发人员完成从命令式UI到声明式UI的思维转变，本文将分享一套Flutter和compose学习笔记，结合示例代码编写、动画演示以及生活例子类比等形式，详细介绍声明式UI的概念、优点及其应用。（文末直接查看获取方式）

照例，先奉上思维导图一张，方便复习：
在这里插入图片描述

笔记

《Jetpack Compose-从入门到精通》

第一章 初识Jetpack Compoese

  • 1.为什么我们需要一个新的UI 工具？

  • 2.Jetpack Compose的着重点
    加速开发
    强大的UI工具
    直观的Kotlin API

  • 3.API 设计
    image.png

  • 4.Compose API 的原则
    一切都是函数
    顶层函数（Top-level function）
    组合优于继承
    信任单一来源

image.png

  • 5.深入了解Compose
    Core
    Foundation
    Material
    image.png

  • 6.插槽API

第二章 Jetpack Compose构建Android UI

  • 1.Android Jetpack Compose 最全上手指南
    Jetpack Compose 环境准备和Hello World
    布局
    使用Material design 设计
    Compose 布局实时预览
    ……
    image.png

  • 2.深入详解 Jetpack Compose | 优化 UI 构建
    Compose 所解决的问题
    Composable 函数剖析
    声明式 UI
    组合 vs 继承
    封装
    重组
    ……
    image.png

  • 3.深入详解 Jetpack Compose | 实现原理
    @Composable 注解意味着什么？
    执行模式
    Positional Memoization (位置记忆化)
    存储参数
    重组
    ……

第三章 Jetpack Compose实战演练

  • 1.Jetpack Compose应用1
    开始前的准备
    创建DEMO
    遇到的问题

  • 2.Jetpack Compose应用2

  • 3.Jetpack Compose应用做一个倒计时器
    数据结构
    倒计时功能
    状态模式
    Compose 布局
    绘制时钟

  • 4.用Jetpack Compose写一个玩安卓App
    准备工作
    引入依赖
    新建 Activity
    创建 Compose
    PlayTheme
    画页面
    底部导航栏
    管理状态
    添加页面

  • 5.用Compose Android 写一个天气应用
    开篇
    画页面
    画背景
    画内容
    ……

  • 6.用Compose快速打造一个“电影App”
    成品
    实现方案
    实战
    不足
    ……
    image.png

Flutter笔记

《Flutter Dart 语言编程入门到精通》：讲解了Dart语言基础，异步编程，标准输入输出流，网络编程及调用C语言编程，可帮助大家快速入手Dart语言。
《Flutter实战演练：第二版》：则是详解讲解Flutter各大组件核心原理，带你建立第一个Flutter应用，可帮大家掌握Flutter背后的框架原理和底层设计思想，建立起属于自己的知识体系。

（有需要完整文档的伙伴可文末查看获取方式！）

《Flutter Dart 语言编程入门到精通》

目录

在这里插入图片描述

《Flutter实战演练：第二版》

目录

在这里插入图片描述

第一章 起步

  • 移动开发技术简介
  • 初识 Flutter
  • 搭建Flutter开发环境
  • Dart语言简介

在这里插入图片描述

第二章 第一个Flutter应用

  • 计数器应用示例
  • Widget 简介
  • 状态管理
  • 路由管理
  • 包管理
  • 资源管理
  • 调试Flutter应用
  • Flutter异常捕获

在这里插入图片描述

第三章 基础组件

  • 文本及样式
  • 按钮
  • 图片及ICON
  • 单选开关和复选框
  • 输入框及表单
  • 进度指示器

在这里插入图片描述

第四章 布局类组件

  • 布局类组件简介
  • 布局原理与约束（constraints）
  • 线性布局（Row和Column）
  • 弹性布局（Flex）
  • 流式布局（Wrap、Flow）
  • 层叠布局（Stack、Positioned）
  • 对齐与相对定位（Align）
  • LayoutBuilder、AfterLayout

在这里插入图片描述

第五章 容器类组件

  • 填充（Padding）
  • 装饰容器（DecoratedBox）
  • 变换（Transform）
  • 容器组件（Container）
  • 剪裁（Clip）
  • 空间适配（FittedBox）
  • 页面骨架（Scaffold）

在这里插入图片描述

第六章 可滚动组件

  • 可滚动组件简介
  • SingleChildScrollView
  • ListView
  • 滚动监听及控制
  • AnimatedList
  • GridView
  • PageView与页面缓存
  • 可滚动组件子项缓存
  • TabBarView
  • CustomScrollView 和 Slivers
  • 自定义 Sliver
  • 嵌套可滚动组件 NestedScrollView

在这里插入图片描述

第七章 功能型组件

  • 导航返回拦截（WillPopScope）
  • 数据共享（InheritedWidget）
  • 跨组件状态共享（Provider）
  • 颜色和主题（Theme）
  • ValueListenableBuilder
  • 异步UI更新（FutureBuilder、StreamBuilder）
  • 对话框详解

在这里插入图片描述

第八章 事件处理与通知

  • 原始指针事件处理
  • 手势识别
  • Flutter事件机制
  • 手势原理与手势冲突
  • 全局事件总线
  • 通知(Notification)

在这里插入图片描述

第九章 动画

  • Flutter动画简介
  • 动画结构
  • 自定义路由过渡动画
  • Hero动画
  • 交织动画
  • 通用“动画切换”组件（AnimatedSwitcher）
  • 动画过渡组件

在这里插入图片描述

第十章 自定义组件

  • 自定义组件方法简介
  • 组合现有组件
  • 组合实例：TurnBox
  • CustomPaint与Canvas
  • 自绘实例：圆形渐变进度条
  • 自绘组件：CustomCheckbox
  • 自绘组件：DoneWidget
  • 水印组件实例：文本绘制与离屏渲染

在这里插入图片描述

第十一章 文件操作与网络请求

  • 文件操作
  • Http请求-HttpClient
  • Http请求-Dio package
  • 实例：Http分块下载
  • WebSocket
  • 使用Socket API
  • Json转Dart Model类

在这里插入图片描述

第十二章 Flutter扩展

  • 包和插件
  • Flutter Web

在这里插入图片描述

第十三章 国际化

  • 让App支持多语言
  • 实现Localizations
  • 使用Intl包
  • 国际化常见问题

在这里插入图片描述

第十四章 Flutter核心原理

  • Flutter UI框架（Framework）
  • Element、BuildContext和RenderObject
  • Flutter启动流程和渲染管线
  • Flutter 布局（Layout）过程
  • Flutter 绘制（一）绘制原理及Layer
  • Flutter 绘制（二）组件树绘制流程
  • Flutter 绘制（三）Layer实例
  • Flutter 绘制（四）Compositing

在这里插入图片描述

第十五章 一个完整的Flutter应用

  • Github客户端示例
  • Flutter APP代码结构
  • Model类定义
  • 全局变量及共享状态
  • 网络请求封装
  • APP入口及主页
  • 登录页
  • 多语言和多主题
    在这里插入图片描述

获取方式

由于篇幅限制，仅用截图展示了部分，需要完整文档资料的，可以点击下方卡片免费获取↓↓↓

Android 工程师编写的 SwiftUI 与 Jetpack Compose深度对比
iCloudEnd的博客
04-12 1793
如果您认为使用 Jetpack Compose（或任何其他多平台 UI 库，如 Flutter 或 React Native）来构建 Android 和 iOS 应用程序是一个好主意，那可能是因为您之前从未开发或使用过 iOS 应用程序. 那是我不久前的情况，这绝对是个坏主意。 文章摘要 SwiftUI 和 Jetpack Compose 的区别 SwiftUI 比 Compose 更好的地方在哪里？ 很高兴认识你 iOS 对于最近的一个项目，我为 Android 和第一次为 iOS 创建了一个移动应用
Flutter 百题斩#1 | 说说你对声明式 UI 的理解
最新发布
张风捷特烈的博客
06-18 144
《匠心星问》是一款集题目浏览、发布、解答、做题于一体的题库应用，采用Flutter框架开发。本文探讨声明式UI的核心概念，将其与传统命令式UI对比，分析其优势（如状态驱动、高效维护）和挑战（如状态管理复杂度）。通过Flutter示例说明声明式UI的工作原理，并指出其在前端开发中的广泛应用。文章强调理解声明式UI对掌握Flutter框架的重要性，为开发者提供学习方向和解题思路。
Android声明式UI框架-Litho-初探——基础使用篇
m0_57699778的博客
06-03 982
初衷 Litho作为一个高性能的UI引擎，学习曲线还是比较高的，但是在国内能用的资料非常少（大部分都是相互复制的”Hello Word“教程），国外除了Litho自己的文档外，也没有太多教程。这几篇教程也是我边学边写。如果有那里理解不到位的地方，欢迎指正。 Litho 是什么 Litho是一个用于在Android上构建高效用户界面（UI）的声明性框架。但不同以往的UI框架，它的底层是Yoga,它通过将不需要交互的UI转换为Drawable来渲染视图，通过Yoga来完成组件布局的异步或同步（可根据场景定制）测
Jetpack Compose：Android 中的声明式 UI
Android_XG的博客
08-04 859
Jetpack Compose 被官方称为 Android 用于构建原生 UI 的现代工具包，它简化并加速了 Android 上的 UI 开发，并以更少的代码、强大的工具和直观的 Kotlin API 快速将应用程序变为现实。谷歌推出了用于构建 Android 应用程序的最新工具包 Jetpack Compose，预计将取代 Android View System。它不是唯一可用的声明性 UI 概念。React Native、Flutter 和 Swift UI 都基于声明式 UI 概念。......
安卓学习笔记-声明式UI
wy53111的博客
05-27 983
前段时间给自己写了个安卓app，整理下笔记
Android中如何实现无缝切码流
2401_84520118的博客
04-27 664
（一）调整好心态心态是一个人能否成功的关键，如果不调整好自己的心态，是很难静下心来学习的，尤其是现在这么浮躁的社会，大部分的程序员的现状就是三点一线，感觉很累，一些大龄的程序员更多的会感到焦虑，而且随着年龄的增长，这种焦虑感会越来越强烈，那么唯一的解决办法就是调整好自己的心态，要做到自信、年轻、勤奋。这样的调整，一方面对自己学习有帮助，另一方面让自己应对面试更从容，更顺利。（二）时间挤一挤，制定好计划一旦下定决心要提升自己，那么再忙的情况下也要每天挤一挤时间，切记不可“两天打渔三天晒网”。
告别XML，Android新声明式UI框架《Jetpack Compose入门到精通》最全开发指南
Androiddddd的博客
12-16 1793
Jetpack Compose是Android的新声明式UI框架。长期以来, Android 开发人员习惯于使用带有状态视图的xml编写UI,这些状态视图通过逐步浏览视图层次结构进行更新。使用Jetpack Compose, UI 是通过使用KotinQ 函数以无状态方式编写的。可组合函数使用注解进行@Composable注解。可组合函数必须使用此注解进行注解，通知编译器此函数将UI添加到View Hierarchy。
Components for Android: 一个高效的声明式UI框架
热门推荐
夏天的夏，夏天的天。
07-13 1万+
编辑推荐：稀土掘金，这是一个针对技术开发者的一个应用，你可以在掘金上获取最新最优质的技术干货，不仅仅是Android知识、前端、后端以至于产品和设计都有涉猎，想成为全栈工程师的朋友不要错过！英文原文：Components for Android: A declarative framework for efficient UIs 。滚动界面是移动端最常见的模式了。如果你做过app，那么你很可能使用...
三思系列：“声明式UI“和“命令式UI“，你的理解可能是错的
2401_84123294的博客
04-18 1219
甚至，接口的表现形式是一种语言。接口被定义时，其表意即已固定，当其表意：越倾向于现实表达时，呈现为声明式越倾向于执行过程时，呈现为命令式UIUser Interface 的简称，直译为用户界面UI系统需要处理两个范畴的事情：内容呈现、反馈用户交互另外，还需要程序构建出UI。我们需要从这三个角度来看。构建UI时的 命令式 和 声明式我们在Android原有的知识领域中看这个问题。我们知道，这部分内容设计时是遵守 OOP 的，存在一整套View 类簇。而界面由具体的功能类组建出视图树。
使用Jetpack Compose在Android中构建UI_android jetpack ui
2401_84520377的博客
05-01 798
学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯。所以：贵在坚持！最后如何才能让我们在面试中对答如流呢？答案当然是平时在工作或者学习中多提升自身实力的啦，那如何才能正确的学习，有方向的学习呢？有没有免费资料可以借鉴？为此我整理了一份Android学习资料路线：这里是一部分我工作以来以及参与过的大大小小的面试收集总结出来的一套BAT大厂面试资料专题包，主要还是希望大家在如今大环境不好的情况下面试能够顺利一点，希望可以帮助到大家。
新一代声明式 UI 框架，Android Jetpack Compose 开发应用指南
qq_44102588的博客
12-20 1591
前言 Jetpack Compose 是 Android 推出的新一代声明式 UI 框架，Compose 库是用响应式编程的方式对 View 进行构建，用更少更直观的代码拥有更强大的功能，同时还能提高开发速度。 Jetpack Compose 特点 根据谷歌官方介绍，Jetpack Compose 有以下特点： 更少的代码：使用更少的代码实现更多的功能，并且可以避免各种错误，从而使代码简洁且易于维护。 直观的 Kotlin API：只需描述界面，Compose 会负责处理剩余的工作。应用状态变化时，界
Litho:在 Android 上构建高效 UI 的声明式框架-开源
08-09
Litho 使用声明性 API 来定义 UI 组件。 您只需根据一组不可变的输入来描述 UI 的布局，框架会负责其余的工作。 通过代码生成，Litho 可以在幕后为您的 UI 执行优化，同时保持您的代码简单且易于维护。 Litho 可以提前测量和布局您的 UI，而不会阻塞 UI 线程。 通过将其布局系统与传统的 Android View 系统解耦，Litho 可以摆脱 Android 强加的 UI 线程约束。 Litho 使用 Yoga 进行布局并自动减少您的 UI 包含的 ViewGroup 的数量。 除了 Litho 的文本优化之外，这还允许更小的视图层次结构并提高内存和滚动性能。
dotnet-ReUI基于XML和LUA的Unity声明式UI系统
08-14
ReUI - 基于XML和LUA的Unity声明式UI系统
声明式 UI 介绍
Flutter 社区
11-28 4004
这篇介绍描述了 Flutter 所使用的声明式 UI 和许多其他 UI 框架所使用的命令式 UI 的概念性差异。1. 为什么是声明式 UI？从 Win32 到 Web 再到 Androi...
我用AI学Android Jetpack Compose之理解声明式UI
学无止境，止于至善
01-04 1390
声明式UI和命令式UI各有优劣，选择哪种方式取决于项目的具体需求和技术栈的选择。对于大多数现代Web和移动应用开发而言，声明式UI因其简洁性、一致性和易于维护的特点而受到广泛欢迎。然而，在某些需要精细控制的场景中，命令式UI仍然具有其独特的优势。随着技术的发展，越来越多的框架和库开始支持声明式编程风格，这也反映了业界对这种范式的认可和偏好。希望这些信息能够帮助你更好地理解这两种UI编程范式之间的区别。如果你有任何进一步的问题或需要更详细的解释，请随时提问！
鸿蒙(HarmonyOS)--声明式UI、自定义组件
hqy1989的博客
09-23 4924
说明自定义变量不能与基础通用属性/事件名重复。装饰器： 用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器@Component表示自定义组件@Entry表示该自定义组件为入口组件@State表示组件中的状态变量状态变量变化会触发UI刷新。UI描述：以声明式的方式来描述UI的结构，例如build()方法中的代码块。自定义组件：可复用的UI单元，可组合其他组件，如上述被@Component装饰的struct Hello。
Android composse 声明式UI，更简单的自定义
m0_70748458的博客
06-10 1559
声明式UI，更简单的自定义； 实时带交互的预览功能 Compose 并不是类似于Recyclerview的高级控件，而是直接抛弃了View，ViewGroup那套东西，从上到下鲁了一套全新的框架，直白点说就是它的渲染机制，布局机制，触摸算法，以及UI 具体写法全都是新的Compose 实现了声明式UI，替代传统的命令是UI； 可能对于我们来说第一个问题就是什么是声明式？什么是命令式UI？ 首先看一下声明式UI长什么样Compose是用kotlin来写的，它的每一个控件都是一个函数调用； Text() T
声明式UI是否会成为Android开发的主流？
clcwcxfwf的专栏
06-21 1238
从Windows到Web，到Android，到iOS，我们编写应用 (App) 最初的方式都是命令式的 (Imperative Style) 。但随着声明式 (Declarative Style) 的出现，情况正在发生极速的变化。
【Android 从入门到出门】第二章：使用声明式UI创建屏幕并探索组合原则
kunlong-luo的博客
03-01 1359
第二章：使用声明式UI创建屏幕并探索组合原则。
腾讯T10工程师揭示Android核心优化：UI、启动、安全等
同时，使用异步布局框架如Litho可以提高复杂界面的性能，Flutter和Jetpack Compose则提供现代UI开发的解决方案，通过声明式编程简化布局构建和性能优化。 3. **工具使用**：为了监控和分析UI性能，开发者可以利用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值