【Android】Compose初识

1.Compose是什么

Jetpack Compose是谷歌开辟的一个现代的、声明式的UI工具包，用于构建原生的Android应用程序界面。它简化了创建复杂用户界面的过程，而且让开辟者能够以更直观和高效的方式编写代码。
2.Compose上风

• 使用更少的代码实现更多的功能，而且可以克制各种bug，从而使代码简便且易于维护。
  
• 只需要形貌界面，compose会负责剩余工作。应用状态变化时，界面会主动更新。
  
• 兼容现有所有的代码，方便您究竟预览。
  
• 内置了对Google Material Design指南的支持，包括颜色、形状、排版等，帮助开辟者快速构建符合设计规范的应用。
  

3.可组合函数

在Jetpack Compose中，可组合函数（Composable functions）是构建用户界面的核心概念。它们是以特定方式定义的函数，用于形貌应用UI的一部分。通过将多个可组合函数组合在一起，可以构建出整个应用程序的用户界面。

• 命名约定：可组合函数通常以大写字母开头，这是为了区分普通函数和可组合函数，方便开辟者识别。
  
• @Composable注解：每个可组合函数都需要用@Composable注解来标记，表明该函数是一个可组合函数，而且只能从其他可组合函数内部调用。
  
• 状态响应：可组合函数能够响应状态的变化。当状态更新时，受影响的可组合函数会主动重新组合（recompose），即重新执行以反映最新的状态。这使得界面总是与数据保持同步。
  
• 副作用处理：有时间可组合函数需要执行一些副作用操纵，比如启动一个协程、发起网络请求等。Jetpack Compose提供了一些API如LaunchedEffect、 DisposableEffect等，帮助安全地管理这些副作用。
  
• 参数通报：可组合函数可以通过参数吸收数据或回调，这答应你创建高度可重用和灵活的UI组件。
  
• 嵌套组合：你可以在一个可组合函数内部调用其他可组合函数，从而形成条理化的UI结构。这种组合性是Jetpack Compose设计理念的重要组成部分。
  
• 预览功能：使用@Preview注解，可以在Android Studio中直接预览可组合函数的效果，无需运行整个应用程序，这大大进步了开辟服从。
  
• 内置组件：Jetpack Compose提供了许多内置的可组合函数，如Text、Button、Column、Row等，这些都是用来快速搭建常见UI元素的根本组件。
  

1. class MainActivity : ComponentActivity() {
2.     override fun onCreate(savedInstanceState: Bundle?) {
3.         super.onCreate(savedInstanceState)
4.         setContent {
5.             MessageCard("My Android")
6.         }
7.     }
9.     @Composable
10.     fun MessageCard(name : String){
11.         Text(text = "Hello $name!", modifier = Modifier.padding(4.dp))
12.     }
15.     @Preview
16.     @Composable
17.     fun PreviewMessageCard(){
18.         MessageCard(name = "My Android")
19.     }
20. }

复制代码

4.结构

使用Column垂直分列元素，使用Row程度分列项，使用Box堆叠元素。

1.     @Composable
2.     fun MessageCard(msg : Message){
3.         Row {
4.             Image(
5.                 painter = painterResource(id = R.drawable.ic_launcher_foreground),
6.                 contentDescription = null
7.             )
8.             Column {
9.                 Text(text = msg.author)
10.                 Text(text = msg.body)
11.             }
12.         }
13.     }

复制代码

5.设置结构

为了装饰或设置可组合项，Compose使用修饰符。通过修饰符，您可以更改可组合项的大小、结构、外观，还可以添加高级互动，例如使元素可点击。您可以将这些修饰度链接起来，以创建更丰富的可组合项。

1.     @Composable
2.     fun MessageCard(msg : Message){
3.         Row(modifier = Modifier.padding(all = 8.dp)) {
4.             Image(
5.                 painter = painterResource(id = R.drawable.img),
6.                 contentDescription = "ikun",
7.                 modifier = Modifier
8.                     .size(40.dp)
9.                     .clip(CircleShape)
11.             )
12.             Column {
13.                 Text(text = msg.author)
14.                 Spacer(Modifier.height(4.dp))
15.                 Text(text = msg.body)
16.             }
17.         }
18.     }

复制代码

6.Material Design

Material Design 是由谷歌开辟的一套视觉设计语言，旨在为用户界面提供一致且高质量的设计标准。它不光是一组视觉指南，还包罗了交互模式、动画、排版、图标、颜色等多方面的规范，帮助开辟者和设计师构建直观、美观且功能强大的用户体验。
Material Design 组件与模式

• 卡片 (Cards)：用于展示内容和操纵的容器。
  
• 按钮 (Buttons)：包括文本按钮、表面按钮、填充按钮等。
  
• 文本字段 (Text Fields)：用于输入文本的控件。
  
• 列表 (Lists) 和 网格 (Grids)：用于组织和体现多个项目。
  
• 底部导航栏 (Bottom Navigation) 和 抽屉菜单 (Drawer)：用于导航。
  
• 对话框 (Dialogs) 和 底片 (Bottom Sheets)：用于暂时性的任务或选项选择。
  
• 标签 (Tabs)：用于在不同视图之间切换。
  
• 工具栏 (Toolbars) 和 应用栏 (App Bars)：作为页面顶部的主要导航和操纵区域。
  

7.列表与动画

在 Jetpack Compose 中，列表和动画是构建动态且交互性强的用户界面的关键元素。Jetpack Compose 提供了内置的支持来简化这些功能的实现。

1. class MainActivity04 : ComponentActivity() {
2.     override fun onCreate(savedInstanceState: Bundle?) {
3.         super.onCreate(savedInstanceState)
4.         setContent {
5.             ComposeTestTheme {
6.                 Conversation(SampleData.conversationSample)
7.             }
9.         }
10.     }
12.     @Composable
13.     fun MessageCard(msg : Message){
14.         Row(modifier = Modifier.padding(all = 8.dp)) {
15.             Image(
16.                 painter = painterResource(id = R.drawable.img),
17.                 contentDescription = "ikun",
18.                 modifier = Modifier
19.                     .size(40.dp)
20.                     .clip(CircleShape)
22.             )
23.             Spacer(modifier = Modifier.width(8.dp))
25.             var isExpanded by remember {
26.                 mutableStateOf(false)
27.             }
28.             val surfaceColor : Color by animateColorAsState(
29.                 if (isExpanded) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.surface
30.             )
31.             Column(
32.                 modifier = Modifier.clickable { isExpanded = !isExpanded}
33.             ) {
34.                 Text(
35.                     text = msg.author,
36.                     color = MaterialTheme.colorScheme.secondary
37.                 )
38.                 Spacer(Modifier.height(4.dp))
39.                 Surface(
40.                     shape = MaterialTheme.shapes.medium,
41.                     shadowElevation = 1.dp,
42.                     color = surfaceColor,
43.                     modifier = Modifier
44.                         .animateContentSize()
45.                         .padding(1.dp)
46.                 ) {
47.                     Text(
48.                         text = msg.body,
49.                         modifier = Modifier.padding(4.dp),
50.                         style = MaterialTheme.typography.bodyMedium,
51.                         maxLines = if (isExpanded) Int.MAX_VALUE else 1
52.                     )
53.                 }
54.             }
55.         }
56.     }
58.     @Composable
59.     fun Conversation(messages : List<Message>){
60.         LazyColumn {
61.             items(messages) { message ->
62.                 MessageCard(message)
63.             }
64.         }
65.     }
67. }

复制代码

8.声明式UI

声明式UI（Declarative User Interface）是一种用户界面编程范式，它答应开辟者以声明的方式形貌用户界面的结构和举动，而不是具体地指定如何实现这些举动。这意味着你只需要告诉框架你想要什么样子的UI，而不需要管理UI的状态转换过程。
在声明式UI中，开辟者通常定义一个UI的状态模型，并基于这个状态来构建UI。当底层数据或状态改变时，UI会主动更新以反映最新的状态。这种方式简化了UI代码的编写和维护，因为它减少了手动操纵DOM或视图层级的需要，同时使得UI逻辑更加直观易懂。
9.组合

在Jetpack Compose中，“组合”（Composition）是指通过组合多个可组合函数（composable functions）来构建用户界面的过程。
在Compose中，一个组合可以被视为一系列的可组合函数调用，这些函数共同形貌了应用的UI。每个可组合函数都可以包罗其他可组合函数，形成一个树状结构，这棵树代表了整个应用程序的UI条理。这种模式使得代码具有高度的模块化和复用性，因为你可以在不同的地方重用雷同的UI组件。

1. @Composable
2. fun MyApp() {
3.     // 定义顶层UI
4.     MaterialTheme {
5.         Surface(color = MaterialTheme.colors.background) {
6.             MyScreenContent()
7.         }
8.     }
9. }
11. @Composable
12. fun MyScreenContent(names: List<String> = listOf("World", "Compose")) {
13.     Column {
14.         for (name in names) {
15.             Greeting(name = name)
16.         }
17.     }
18. }
20. @Composable
21. fun Greeting(name: String) {
22.     Text(text = "Hello $name!")
23. }

复制代码

10.重组

“重组”（Recomposition）是指当状态改变时，Compose系统重新执行可组合函数以更新UI的过程。这是Jetpack Compose响应式编程模型的核心部分，它确保了UI总是与最新的应用状态保持同步。
重组的工作原理

• 状态检测：当某个状态值发生变化时，Compose会检测到这一变化。
  
• 触发重组：根据依赖该状态的可组合函数，Compose会决定哪些部分需要被重新计算。
  
• 最小化工作量：Compose只会重新执行那些依赖于已更改状态的可组合函数，而不是整个UI树。这意味着它只做须要的工作来更新UI，从而进步了服从。
  
• UI 更新：经过重组后，如果可组合函数返回了不同的内容，则UI将相应地更新。
  

控制重组
为了优化性能和确保正确的逻辑执行，开辟者可以接纳以下步伐：

• remember：使用remember关键字可以让某些计算效果或对象在组合期间缓存起来，只有当其依赖项发生改变时才会重新计算。这有助于克制不须要的计算。
  
• key参数：在列表等场景下，可以通过提供一个唯一的key来帮助Compose识别哪些项目已经存在，哪些是新的或者发生了变化，从而更智能地进行重组。
  
• 克制副作用：只管不在可组合函数内部执行副作用操纵（如网络请求、数据库访问）。如果确实需要，应该使用恰当的API（如LaunchedEffect、DisposableEffect）来确保这些操纵在符合的时机执行，而且不会因为不须要的重组而频繁触发。
  
• derivedStateOf 和 snapshotFlow：可以用来创建衍生状态或监听特定的状态变化，以减少不须要的重组次数。
  

1. @Composable
2. fun Counter(count: Int, onIncrement: () -> Unit) {
3.     // 当count变化时，这个Text组件会重组并显示新的计数值
4.     Text(text = "Count: $count")
5.    
6.     // 这个按钮点击时会调用onIncrement回调函数，导致count状态变化
7.     Button(onClick = onIncrement) {
8.         Text("Increment")
9.     }
10. }
12. @Composable
13. fun CounterApp() {
14.     var count by remember { mutableStateOf(0) }
16.     Counter(count = count) {
17.         count++
18.     }
19. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。