Jetpack Compose赋能：以速破局，高效打造非凡应用

news2024/12/14 15:54:59

Android Compose 是谷歌推出的一种现代化 UI 框架，基于 Kotlin 编程语言，旨在简化和加速 Android 应用开发。它以声明式编程为核心，与传统的 View 系统相比，Compose 提供了更直观、更简洁的开发体验。以下是对 Android Compose 的全面解析：

在这里插入图片描述

一、Compose 概述

1.1 什么是 Jetpack Compose？
Jetpack Compose 是 Android 的现代 UI 工具包，使用声明式编程方法构建本地 UI。它简化了复杂的界面开发，并与 Jetpack 系列工具（如 LiveData、Navigation）深度集成。

核心特点：
声明式：通过函数声明 UI，而非操作 View 的属性。
响应式：数据变化时 UI 自动更新，无需手动调用 notifyDataSetChanged。
全 Kotlin 支持：充分利用 Kotlin 的语言特性（扩展函数、Lambda 表达式等）。

二、核心组件详解

2.1 基本构造块：Composable 函数
所有 Compose 的 UI 组件都是通过 Composable 函数实现的。

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

@Composable 注解：标记函数为可组合函数，允许该函数定义 UI。
无 XML：直接使用 Kotlin 构建 UI，抛弃传统 XML 布局。

2.2 布局系统
Compose 提供灵活的布局 API，主要有以下几种：
Row 和 Column：分别用于水平和垂直排列。
Box：用于堆叠子组件。
LazyColumn 和 LazyRow：高效的滚动列表布局。

@Composable
fun LayoutDemo() {
    Column {
        Text("This is Column")
        Row {
            Text("This is Row")
        }
        Box {
            Text("This is Box")
        }
    }
}

2.3 基础组件
Compose 提供了一系列组件用于构建界面，例如：
Text：显示文字。
Button：按钮。
Image：图片显示。

@Composable
fun ComponentDemo() {
    Column {
        Text("Welcome to Compose!")
        Button(onClick = { /*TODO*/ }) {
            Text("Click Me")
        }
    }
}

三、状态管理

Compose 的响应式特点依赖于状态管理机制。状态可以通过 State 和 MutableState 实现。

3.1 状态的声明与使用
kotlin

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    Button(onClick = { count++ }) {
        Text("Clicked $count times")
    }
}

remember：在重新组合时保留状态。
mutableStateOf：创建可变状态。

3.2 ViewModel 与 Compose
Compose 与 ViewModel 的结合非常简单，可以使用 viewModel() 函数直接获取 ViewModel。

class MyViewModel : ViewModel() {
    val count = mutableStateOf(0)
}

@Composable
fun CounterWithViewModel(viewModel: MyViewModel = viewModel()) {
    Button(onClick = { viewModel.count.value++ }) {
        Text("Count: ${viewModel.count.value}")
    }
}

四、导航与多屏支持

Compose 提供了自己的导航库 Navigation Compose，可以轻松实现屏幕之间的切换。

4.1 导航组件使用

@Composable
fun NavDemo() {
    val navController = rememberNavController()
    NavHost(navController, startDestination = "screen1") {
        composable("screen1") { Screen1(navController) }
        composable("screen2") { Screen2() }
    }
}

@Composable
fun Screen1(navController: NavController) {
    Button(onClick = { navController.navigate("screen2") }) {
        Text("Go to Screen 2")
    }
}

@Composable
fun Screen2() {
    Text("This is Screen 2")
}

五、主题与样式

Compose 使用 MaterialTheme 作为默认样式系统，允许自定义主题。

5.1 定义主题
kotlin

@Composable
fun MyAppTheme(content: @Composable () -> Unit) {
    MaterialTheme(
        colors = darkColors(),
        typography = Typography(),
        shapes = Shapes(),
        content = content
    )
}

5.2 应用主题

@Composable
fun App() {
    MyAppTheme {
        // UI 内容
        Text("Styled with Theme")
    }
}

六、性能优化

Compose 提供了许多工具用于性能调试和优化：

  1. 布局检查器：查看 Compose 布局层次结构。
  2. shouldBeSkipped 检测：避免不必要的重组。
  3. 懒加载列表：使用 LazyColumn 替代普通的 Column。

七、Compose 与传统 View 的互操作性

Compose 可以嵌入传统 View 中，或将传统 View 嵌入到 Compose 中。

7.1 Compose 嵌入 View
使用 ComposeView 嵌入 Compose UI：
kotlin

val composeView = ComposeView(context).apply {
    setContent {
        Greeting("Compose in View")
    }
}

7.2 View 嵌入 Compose
使用 AndroidView 嵌入传统 View：

@Composable
fun AndroidViewExample() {
    AndroidView(
        factory = { context -> TextView(context).apply { text = "Traditional View in Compose" } }
    )
}

八、完整案例：Todo 应用
以下是一个使用 Compose 构建的简单 Todo 应用：

@Composable
fun TodoApp() {
    var todos by remember { mutableStateOf(listOf("Learn Compose", "Build App")) }

    Column {
        LazyColumn {
            items(todos) { todo ->
                Text(todo)
            }
        }
        var newTodo by remember { mutableStateOf("") }
        Row {
            TextField(value = newTodo, onValueChange = { newTodo = it })
            Button(onClick = { 
                todos = todos + newTodo
                newTodo = ""
            }) {
                Text("Add")
            }
        }
    }
}

通过以上详细解析，可以看出 Jetpack Compose 是未来 Android UI 开发的趋势。它的声明式编程模型、与 Kotlin 的深度结合以及丰富的功能特性，为开发者带来了全新的开发体验。

在这里插入图片描述

以下是一个通过 Jetpack Compose 实现的简单记账应用（Expense Tracker）的示例，涵盖了项目的主要模块：添加记录、列表展示、统计汇总以及导航功能。

功能描述

  1. 主界面显示所有支出记录。

  2. 用户可以添加新的支出记录，包括标题、金额和日期。

  3. 汇总功能，计算总支出。

  4. 支持界面间导航。

  5. 数据模型和 ViewModel

数据模型

data class Expense(
    val id: Int,
    val title: String,
    val amount: Double,
    val date: String
)


 ViewModel
kotlin
class ExpenseViewModel : ViewModel() {
    private val _expenses = MutableLiveData<List<Expense>>()
    val expenses: LiveData<List<Expense>> = _expenses

    init {
        _expenses.value = listOf() // 初始为空
    }

    fun addExpense(expense: Expense) {
        _expenses.value = _expenses.value?.plus(expense)
    }

    fun getTotalAmount(): Double {
        return _expenses.value?.sumOf { it.amount } ?: 0.0
    }
}
  1. 主界面：显示支出记录

列表界面

@Composable
fun ExpenseListScreen(
    viewModel: ExpenseViewModel = viewModel(),
    onAddExpenseClick: () -> Unit
) {
    val expenses by viewModel.expenses.observeAsState(emptyList())
    val totalAmount = viewModel.getTotalAmount()

    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        Text("Total Expense: $${"%.2f".format(totalAmount)}", style = MaterialTheme.typography.h6)

        Spacer(modifier = Modifier.height(16.dp))

        LazyColumn(
            modifier = Modifier.weight(1f),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(expenses) { expense ->
                ExpenseItem(expense)
            }
        }

        Spacer(modifier = Modifier.height(16.dp))

        Button(
            onClick = onAddExpenseClick,
            modifier = Modifier.align(Alignment.CenterHorizontally)
        ) {
            Text("Add Expense")
        }
    }
}

@Composable
fun ExpenseItem(expense: Expense) {
    Card(
        modifier = Modifier.fillMaxWidth(),
        elevation = 4.dp
    ) {
        Row(
            modifier = Modifier.padding(16.dp),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Column {
                Text(expense.title, style = MaterialTheme.typography.h6)
                Text(expense.date, style = MaterialTheme.typography.body2, color = Color.Gray)
            }
            Text("$${"%.2f".format(expense.amount)}", style = MaterialTheme.typography.body1, color = Color.Green)
        }
    }
}
  1. 添加记录界面

添加支出记录

@Composable
fun AddExpenseScreen(viewModel: ExpenseViewModel, onBackClick: () -> Unit) {
    var title by remember { mutableStateOf("") }
    var amount by remember { mutableStateOf("") }
    var date by remember { mutableStateOf("") }
    var errorMessage by remember { mutableStateOf("") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Add Expense", style = MaterialTheme.typography.h5)

        Spacer(modifier = Modifier.height(16.dp))

        TextField(
            value = title,
            onValueChange = { title = it },
            label = { Text("Title") },
            modifier = Modifier.fillMaxWidth()
        )

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

        TextField(
            value = amount,
            onValueChange = { amount = it },
            label = { Text("Amount") },
            modifier = Modifier.fillMaxWidth(),
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
        )

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

        TextField(
            value = date,
            onValueChange = { date = it },
            label = { Text("Date (e.g., 2024-12-01)") },
            modifier = Modifier.fillMaxWidth()
        )

        Spacer(modifier = Modifier.height(16.dp))

        if (errorMessage.isNotEmpty()) {
            Text(errorMessage, color = Color.Red)
            Spacer(modifier = Modifier.height(8.dp))
        }

        Button(
            onClick = {
                if (title.isNotEmpty() && amount.toDoubleOrNull() != null && date.isNotEmpty()) {
                    viewModel.addExpense(
                        Expense(
                            id = System.currentTimeMillis().toInt(),
                            title = title,
                            amount = amount.toDouble(),
                            date = date
                        )
                    )
                    onBackClick()
                } else {
                    errorMessage = "Please fill all fields correctly"
                }
            },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("Add")
        }
    }
}
  1. 导航集成

添加导航依赖
确保 build.gradle 包含导航依赖：

implementation "androidx.navigation:navigation-compose:2.7.3"

导航实现

@Composable
fun ExpenseApp() {
    val navController = rememberNavController()
    val viewModel: ExpenseViewModel = viewModel()

    NavHost(navController = navController, startDestination = "expense_list") {
        composable("expense_list") {
            ExpenseListScreen(
                viewModel = viewModel,
                onAddExpenseClick = { navController.navigate("add_expense") }
            )
        }
        composable("add_expense") {
            AddExpenseScreen(
                viewModel = viewModel,
                onBackClick = { navController.navigateUp() }
            )
        }
    }
}
  1. 主函数

启动 Compose 应用程序：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                ExpenseApp()
            }
        }
    }
}

示例解析

  1. ExpenseListScreen 显示所有支出记录，支持动态更新和总金额汇总。
  2. AddExpenseScreen 提供表单输入，用户可以轻松添加支出记录。
  3. ExpenseViewModel 负责管理数据状态，保持 UI 与数据同步。
  4. NavHost 实现了页面间的导航，逻辑清晰，操作简单。

通过此例子，你可以看到 Compose 在实际项目中如何实现响应式数据绑定、动态界面更新和模块化导航。

总结

优点

  1. 开发效率高：减少样板代码，UI 变化实时预览。
  2. 灵活性：声明式编程结合 Kotlin 的优势。
  3. 跨平台潜力：未来可能支持多平台。

缺点

  1. 学习成本：需要重新学习新框架。
  2. 生态尚不完善：部分 Jetpack 库对 Compose 的支持有限。
  3. 性能优化要求高：需要注意避免不必要的重组。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2259412.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Dual-Write Problem 双写问题（微服务）

Dual-Write Problem 双写问题（微服务）

原文链接https://www.confluent.io/blog/dual-write-problem/ 双写问题发生于当两个外部系统必须以原子的方式更新时。 问题 说有人到银行存了一笔钱&#xff0c;触发 DepositFunds 命令&#xff0c;DepositFunds 命令被发送到Account microservice。 Account microservice需…
阅读更多...
桥接模式的理解和实践

桥接模式的理解和实践

桥接模式&#xff08;Bridge Pattern&#xff09;&#xff0c;又称桥梁模式&#xff0c;是一种结构型设计模式。它的核心思想是将抽象部分与实现部分分离&#xff0c;使它们可以独立地进行变化&#xff0c;从而提高系统的灵活性和可扩展性。本文将详细介绍桥接模式的概念、原理…
阅读更多...
kubeadm安装K8s集群之高可用组件keepalived+nginx及kubeadm部署

kubeadm安装K8s集群之高可用组件keepalived+nginx及kubeadm部署

系列文章目录 1.kubeadm安装K8s集群之基础环境配置 2.kubeadm安装K8s集群之高可用组件keepalivednginx及kubeadm部署 3.kubeadm安装K8s集群之master节点加入 4.kubeadm安装K8s集群之worker1节点加入 kubeadm安装K8s集群之高可用组件keepalivednginx及kubeadm部署 1.安装kubeadm…
阅读更多...
Avalonia实战实例三：实现可输入框的ComboBox控件

Avalonia实战实例三：实现可输入框的ComboBox控件

文章目录 一、Avalonia中的ComboBox控件二、更改Template&#xff0c;并添加水印 接着上篇关闭按钮实现登录界面 实现一个可输入&#xff0c;可下拉的用户名输入框 一、Avalonia中的ComboBox控件 Avalonia中Fluent主题里ComboBox实现&#xff1a; <ControlTheme x:Key&q…
阅读更多...
TMS320C55x DSP芯片结构和CPU外围电路

TMS320C55x DSP芯片结构和CPU外围电路

第2章 DSP芯片结构和CPU外围电路 文章目录 第2章 DSP芯片结构和CPU外围电路TMS320C55x处理器的特点TMS320c55x CPU单元指令缓冲(Instruction Buffer Unit) I单元程序流程(Program Flow Unit) P单元地址数据(Address-data Flow Unit) A单元数据计算(Data Computation Unit) D单元…
阅读更多...
Oracle 与 达梦 数据库 对比

Oracle 与 达梦 数据库 对比

当尝试安装了达梦数据库后&#xff0c;发现达梦真的和Oracle数据库太像了&#xff0c;甚至很多语法都相同。 比如&#xff1a;Oracle登录数据库采用sqlplus&#xff0c;达梦采用disql。 比如查看数据视图&#xff1a;达梦和Oracle都有 v$instance、v$database、dba_users等&a…
阅读更多...
数据结构之五：排序

数据结构之五：排序

void*类型的实现&#xff1a;排序&#xff08;void*类型&#xff09;-CSDN博客 一、插入排序 1、直接插入排序 思想&#xff1a;把待排序的数据逐个插入到一个已经排好序的有序序列中&#xff0c;直到所有的记录插入完为止&#xff0c;得到一个新的有序序列 。 单趟&#x…
阅读更多...
JavaWeb:JavaScript

JavaWeb:JavaScript

学习 资源1 学习资源 2 黑马javaweb 1、引入方式 内部脚本&#xff1a; <script>内容</script> 外部脚本&#xff1a; <script src"js/test.js"></script> 2、基础语法 注释&#xff1a;// /* */ 结尾分号可有可无 大括号表示代码块 …
阅读更多...
MySQL其五，索引详解，逻辑架构，SQL优化等概念

MySQL其五，索引详解，逻辑架构，SQL优化等概念

目录 一、索引 1、索引的概念 2、索引的优缺点 3、添加索引的原则 4、索引的分类 5、索引如何使用 6、存储过程讲解 7、测试索引的效率 7、索引的数据结构 8、覆盖索引&#xff08;SQL优化的点&#xff09; 9、最佳左前缀法则&#xff08;SQL优化的点&#xff09; 二…
阅读更多...
考研数学【线性代数基础box（数二）】

考研数学【线性代数基础box（数二）】

本文是对数学二线性代数基础进行总结&#xff0c;一些及极其简单的被省略了&#xff0c;代数的概念稀碎&#xff0c;不如高数关联性高&#xff0c;所以本文仅供参考&#xff0c;做题请从中筛选&#xff01; 本文为初稿&#xff0c;后面会根据刷题和自己的理解继续更新 第一章…
阅读更多...
全面解析租赁小程序的功能与优势

全面解析租赁小程序的功能与优势

内容概要 租赁小程序正在逐渐改变人与物之间的互动方式。通过这些小程序&#xff0c;用户不仅可以轻松找到所需的租赁商品&#xff0c;还能够享受无缝的操作体验。为了给大家一个清晰的了解&#xff0c;下面我们将重点介绍几个核心功能。 建议&#xff1a;在选择租赁小程序时&…
阅读更多...
Linux DNS 协议概述

Linux DNS 协议概述

1. DNS 概述 互联网中&#xff0c;一台计算机与其他计算机通信时&#xff0c;通过 IP 地址唯一的标志自己。此时的 IP 地址就类似于我们日常生活中的电话号码。但是&#xff0c;这种纯数字的标识是比较难记忆的&#xff0c;而且数量也比较庞大。例如&#xff0c;每个 IPv4 地址…
阅读更多...
Java使用ORM Bee自动生成Javabean.

Java使用ORM Bee自动生成Javabean.

Java使用ORM Bee自动生成Javabean. 配置数据库连接,添加了pom.xml依赖后,就可以写Java代码,自动生成Javabean了. 可参考:https://gitee.com/automvc/bee https://github.com/automvc/bee 还可以生成字段文件, 这样可以避免硬编码引用字段,速度也比反射快. package org.tea…
阅读更多...
【MySQL中多表查询和函数】

【MySQL中多表查询和函数】

目录 1.多表查询 1.1 外键 1.2 链接查询 2.MySQL函数 内置函数简介 数值函数 字符串函数 时间日期函数 条件判断操作 开窗函数 1.多表查询 本质&#xff1a;把多个表通过主外键关联关系链接&#xff08;join&#xff09;合并成一个大表&#xff0c;在去单表查询操作…
阅读更多...
二维码数据集，使用yolov，voc，coco标注，3044张各种二维码原始图片（未图像增强）

二维码数据集，使用yolov，voc，coco标注，3044张各种二维码原始图片（未图像增强）

二维码数据集&#xff0c;使用yolov&#xff0c;voc&#xff0c;coco标注&#xff0c;3044张各种二维码原始图片&#xff08;未图像增强&#xff09; 数据集分割 训练组70&#xff05; 2132图片 有效集20&#xff05; 607图片 测试集10&#xff05; 305图…
阅读更多...
MySQL多表查询时有哪些连接方式?

MySQL多表查询时有哪些连接方式?

大家好&#xff0c;我是锋哥。今天分享关于【MySQL多表查询时有哪些连接方式?】面试题。希望对大家有帮助&#xff1b; MySQL多表查询时有哪些连接方式? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在 MySQL 中进行多表查询时&#xff0c;常见的连接方式有以下…
阅读更多...
LBS 开发微课堂｜通过openGL ES轻松实现建筑物渲染及动画

LBS 开发微课堂｜通过openGL ES轻松实现建筑物渲染及动画

为了让广大开发者 更深入地了解 百度地图开放平台的 技术能力 轻松掌握满满的 技术干货 更加简单地接入 位置服务 我们特别推出了 “位置服务&#xff08;LBS&#xff09;开发微课堂” 系列技术案例 第五期的主题是 通过openGL ES轻松实现 建筑物渲染及动画 对于…
阅读更多...
Java——IO流(下)

Java——IO流(下)

一 (字符流扩展) 1 字符输出流 (更方便的输出字符——>取代了缓冲字符输出流——>因为他自己的节点流) (PrintWriter——>节点流——>具有自动行刷新缓冲字符输出流——>可以按行写出字符串&#xff0c;并且可通过println();方法实现自动换行) 在Java的IO流中…
阅读更多...
SQLServer到MySQL的数据高效迁移方案分享

SQLServer到MySQL的数据高效迁移方案分享

SQL Server数据集成到MySQL的技术案例分享 在企业级数据管理中&#xff0c;跨平台的数据集成是一个常见且关键的任务。本次我们将探讨如何通过轻易云数据集成平台&#xff0c;将巨益OMS系统中的退款单明细表从SQL Server高效、安全地迁移到MySQL数据库中。具体方案名称为“7--…
阅读更多...
每日计划-1213

每日计划-1213

1. 完成 SQL2 查询多列 https://www.nowcoder.com/exam/oj?page1tabSQL%E7%AF%87topicId199 2. 八股部分 1) C 中面向对象编程如何实现数据隐藏&#xff1f; 在c中&#xff0c;可以将数据成员声明为私有或受保护&#xff0c;并提供公有的成员函数来访问和修改这些数据成员&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023