【Android】Compose初识

🕗 发布于 2024-12-09 18:57 android

文章目录

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元素的基础组件。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MessageCard("My Android")
        }
    }

    @Composable
    fun MessageCard(name : String){
        Text(text = "Hello $name!", modifier = Modifier.padding(4.dp))
    }


    @Preview
    @Composable
    fun PreviewMessageCard(){
        MessageCard(name = "My Android")
    }
}

4.布局

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

    @Composable
    fun MessageCard(msg : Message){
        Row {
            Image(
                painter = painterResource(id = R.drawable.ic_launcher_foreground),
                contentDescription = null
            )
            Column {
                Text(text = msg.author)
                Text(text = msg.body)
            }
        }
    }

在这里插入图片描述

5.配置布局

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

    @Composable
    fun MessageCard(msg : Message){
        Row(modifier = Modifier.padding(all = 8.dp)) {
            Image(
                painter = painterResource(id = R.drawable.img),
                contentDescription = "ikun",
                modifier = Modifier
                    .size(40.dp)
                    .clip(CircleShape)

            )
            Column {
                Text(text = msg.author)
                Spacer(Modifier.height(4.dp))
                Text(text = msg.body)
            }
        }
    }

在这里插入图片描述

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 提供了内置的支持来简化这些功能的实现。

class MainActivity04 : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeTestTheme {
                Conversation(SampleData.conversationSample)
            }

        }
    }

    @Composable
    fun MessageCard(msg : Message){
        Row(modifier = Modifier.padding(all = 8.dp)) {
            Image(
                painter = painterResource(id = R.drawable.img),
                contentDescription = "ikun",
                modifier = Modifier
                    .size(40.dp)
                    .clip(CircleShape)

            )
            Spacer(modifier = Modifier.width(8.dp))

            var isExpanded by remember {
                mutableStateOf(false)
            }
            val surfaceColor : Color by animateColorAsState(
                if (isExpanded) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.surface
            )
            Column(
                modifier = Modifier.clickable { isExpanded = !isExpanded}
            ) {
                Text(
                    text = msg.author,
                    color = MaterialTheme.colorScheme.secondary
                )
                Spacer(Modifier.height(4.dp))
                Surface(
                    shape = MaterialTheme.shapes.medium,
                    shadowElevation = 1.dp,
                    color = surfaceColor,
                    modifier = Modifier
                        .animateContentSize()
                        .padding(1.dp)
                ) {
                    Text(
                        text = msg.body,
                        modifier = Modifier.padding(4.dp),
                        style = MaterialTheme.typography.bodyMedium,
                        maxLines = if (isExpanded) Int.MAX_VALUE else 1
                    )
                }
            }
        }
    }

    @Composable
    fun Conversation(messages : List<Message>){
        LazyColumn {
            items(messages) { message ->
                MessageCard(message)
            }
        }
    }

}

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/0eca2033ec224c2bbcbffeed5e7c4122.

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组件。

@Composable
fun MyApp() {
    // 定义顶层UI
    MaterialTheme {
        Surface(color = MaterialTheme.colors.background) {
            MyScreenContent()
        }
    }
}

@Composable
fun MyScreenContent(names: List<String> = listOf("World", "Compose")) {
    Column {
        for (name in names) {
            Greeting(name = name)
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

10.重组

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

重组的工作原理

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

控制重组
为了优化性能和确保正确的逻辑执行，开发者可以采取以下措施：

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

@Composable
fun Counter(count: Int, onIncrement: () -> Unit) {
    // 当count变化时，这个Text组件会重组并显示新的计数值
    Text(text = "Count: $count")
    
    // 这个按钮点击时会调用onIncrement回调函数，导致count状态变化
    Button(onClick = onIncrement) {
        Text("Increment")
    }
}

@Composable
fun CounterApp() {
    var count by remember { mutableStateOf(0) }

    Counter(count = count) {
        count++
    }
}

原文地址：https://blog.csdn.net/qq_63140630/article/details/144250695

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：前端TS基础
下一篇：Delphi XE 安卓Web开发错误：net::ERR_CLEARTEXT_NOT_PERMITTED

.NET(C#) 如何配置用户首选项及保存用户设置
.NET(C#) 如何配置用户首选项及保存用户设置
阅读更多2024-12-14
【最新】北大数字普惠金融指数数据集-省市县（2011-2023年）
郭峰,王靖一,王芳,孔涛,张勋,程志云.测度中国数字普惠金融发展:指数编制与空间特征[J].经济学(季刊),2020,19(04):1401-1418.时间跨度：省级和城市级指数时间跨度为2011-2
阅读更多2024-12-14
GESP202412 四级【Recamán】题解（AC）
a11ak−1−kkakak−1−kak−1k小杨想知道 Recamán 数列的前n项从小到大排序后的结果。手动计算非常困难，小杨希望你能帮他解决这个问题。
阅读更多2024-12-14
IDEA遇到EasyConnect中的网络资源无法访问的问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.csdn.net/wanshanyu_/article/de
阅读更多2024-12-14
双目摄像头标定方法
此时已经完成标定，左下角为反投影误差，右边为外参可视化。将双目左右目拍的图像上传（左右目最好不少于20张）此时回到主页面，即可看到成功导出。把这些误差大的删除即可。
阅读更多2024-12-14
Servlet、omcat服务器架构与工作原理
Servlet是运行在服务器端的Java程序，它的主要职责之一是接收并处理来自客户端（如浏览器）的HTTP请求。当客户端发送一个请求到服务器时，Servlet可以解析请求中的信息，例如请求的URL路径
阅读更多2024-12-14
Vue生命周期钩子函数：深入解析与实践
作为高级Vue前端开发人员，对Vue组件的生命周期钩子函数有着深刻的理解是至关重要的。生命周期钩子函数是指在Vue组件的创建、更新、销毁等过程中，Vue自动调用的一系列方法。通过这些钩子函数，我们可以
阅读更多2024-12-14
安卓开发--使用android studio发布APP
app发布
阅读更多2024-12-14
数据结构与算法学习笔记----拓扑排序
@ author: 明月清了个风。
阅读更多2024-12-14
python 将数据保存到现有的Excel文件的新工作表
out_file = ‘query.xlsx’df1 = pd.DataFrame(out_data)若直接写入：df1.to_excel(out_file, index=False, sheet_n
阅读更多2024-12-14