文章目录

1.Compose是什么2.Compose优势3.可组合函数4.布局5.配置布局6.Material

Jetpack

Compose是谷歌开发的一个现代的、声明式的UI工具包用于构建原生的Android应用程序界面。

它简化了创建复杂用户界面的过程并且让开发者能够以更直观和高效的方式编写代码。

2.Compose优势

使用更少的代码实现更多的功能并且可以避免各种bug从而使代码简洁且易于维护。

只需要描述界面compose会负责剩余工作。

应用状态变化时界面会自动更新。

兼容现有所有的代码方便您事实预览。

内置了对Google

Material

Design指南的支持包括颜色、形状、排版等帮助开发者快速构建符合设计规范的应用。

在Jetpack

functions是构建用户界面的核心概念。

它们是以特定方式定义的函数用于描述应用UI的一部分。

通过将多个可组合函数组合在一起可以构建出整个应用程序的用户界面。

命名约定可组合函数通常以大写字母开头这是为了区分普通函数和可组合函数方便开发者识别。

Composable注解每个可组合函数都需要用Composable注解来标记表明该函数是一个可组合函数并且只能从其他可组合函数内部调用。

状态响应可组合函数能够响应状态的变化。

当状态更新时受影响的可组合函数会自动重新组合recompose即重新执行以反映最新的状态。

这使得界面总是与数据保持同步。

副作用处理有时候可组合函数需要执行一些副作用操作比如启动一个协程、发起网络请求等。

Jetpack

Compose提供了一些API如LaunchedEffect、

DisposableEffect等帮助安全地管理这些副作用。

参数传递可组合函数可以通过参数接收数据或回调这允许你创建高度可重用和灵活的UI组件。

嵌套组合你可以在一个可组合函数内部调用其他可组合函数从而形成层次化的UI结构。

这种组合性是Jetpack

Compose设计理念的重要组成部分。

预览功能使用Preview注解可以在Android

Studio中直接预览可组合函数的效果无需运行整个应用程序这大大提高了开发效率。

内置组件Jetpack

Compose提供了许多内置的可组合函数如Text、Button、Column、Row等这些都是用来快速搭建常见UI元素的基础组件。

class

{super.onCreate(savedInstanceState)setContent

{MessageCard(My

Modifier.padding(4.dp))}PreviewComposablefun

PreviewMessageCard(){MessageCard(name

Android)}

使用Column垂直排列元素使用Row水平排列项使用Box堆叠元素。

Composablefun

R.drawable.ic_launcher_foreground),contentDescription

null)Column

为了装饰或配置可组合项Compose使用修饰符。

通过修饰符您可以更改可组合项的大小、布局、外观还可以添加高级互动例如使元素可点击。

您可以将这些修饰度链接起来以创建更丰富的可组合项。

Composablefun

R.drawable.img),contentDescription

ikun,modifier

Modifier.size(40.dp).clip(CircleShape))Column

{Text(text

msg.author)Spacer(Modifier.height(4.dp))Text(text

Design

是由谷歌开发的一套视觉设计语言旨在为用户界面提供一致且高质量的设计标准。

它不仅是一组视觉指南还包含了交互模式、动画、排版、图标、颜色等多方面的规范帮助开发者和设计师构建直观、美观且功能强大的用户体验。

Material

(Buttons)包括文本按钮、轮廓按钮、填充按钮等。

文本字段

(Text

中列表和动画是构建动态且交互性强的用户界面的关键元素。

Jetpack

Compose

{super.onCreate(savedInstanceState)setContent

{ComposeTestTheme

{Conversation(SampleData.conversationSample)}}}Composablefun

MessageCard(msg

R.drawable.img),contentDescription

ikun,modifier

Modifier.size(40.dp).clip(CircleShape))Spacer(modifier

isExpanded

MaterialTheme.colorScheme.primary

else

MaterialTheme.colorScheme.surface)Column(modifier

Modifier.clickable

MaterialTheme.colorScheme.secondary)Spacer(Modifier.height(4.dp))Surface(shape

MaterialTheme.shapes.medium,shadowElevation

1.dp,color

Modifier.animateContentSize().padding(1.dp))

{Text(text

MaterialTheme.typography.bodyMedium,maxLines

(isExpanded)

-MessageCard(message)}}}}8.声明式UI

声明式UIDeclarative

Interface是一种用户界面编程范式它允许开发者以声明的方式描述用户界面的结构和行为而不是详细地指定如何实现这些行为。

这意味着你只需要告诉框架你想要什么样子的UI而不需要管理UI的状态转换过程。

在声明式UI中开发者通常定义一个UI的状态模型并基于这个状态来构建UI。

当底层数据或状态改变时UI会自动更新以反映最新的状态。

这种方式简化了UI代码的编写和维护因为它减少了手动操作DOM或视图层级的需要同时使得UI逻辑更加直观易懂。

9.组合

Compose中“组合”Composition是指通过组合多个可组合函数composable

在Compose中一个组合可以被视为一系列的可组合函数调用这些函数共同描述了应用的UI。

每个可组合函数都可以包含其他可组合函数形成一个树状结构这棵树代表了整个应用程序的UI层次。

这种模式使得代码具有高度的模块化和复用性因为你可以在不同的地方重用相同的UI组件。

Composable

MaterialTheme.colors.background)

{MyScreenContent()}}

“重组”Recomposition是指当状态改变时Compose系统重新执行可组合函数以更新UI的过程。

这是Jetpack

Compose响应式编程模型的核心部分它确保了UI总是与最新的应用状态保持同步。

状态检测当某个状态值发生变化时Compose会检测到这一变化。

触发重组根据依赖该状态的可组合函数Compose会决定哪些部分需要被重新计算。

最小化工作量Compose只会重新执行那些依赖于已更改状态的可组合函数而不是整个UI树。

这意味着它只做必要的工作来更新UI从而提高了效率。

UI

更新经过重组后如果可组合函数返回了不同的内容则UI将相应地更新。

控制重组

remember使用remember关键字可以让某些计算结果或对象在组合期间缓存起来只有当其依赖项发生改变时才会重新计算。

这有助于避免不必要的计算。

key参数在列表等场景下可以通过提供一个唯一的key来帮助Compose识别哪些项目已经存在哪些是新的或者发生了变化从而更智能地进行重组。

避免副作用尽量不在可组合函数内部执行副作用操作如网络请求、数据库访问。

如果确实需要应该使用适当的API如LaunchedEffect、DisposableEffect来确保这些操作在合适的时机执行并且不会因为不必要的重组而频繁触发。

derivedStateOf

snapshotFlow可以用来创建衍生状态或监听特定的状态变化以减少不必要的重组次数。

Composable

当count变化时这个Text组件会重组并显示新的计数值Text(text

Count:

这个按钮点击时会调用onIncrement回调函数导致count状态变化Button(onClick

onIncrement)