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

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. 性能优化要求高：需要注意避免不必要的重组。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

40 基于单片机的温湿度检测判断系统

40 基于单片机的温湿度检测判断系统

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于STC89C52单片机&#xff0c;采用dht11温湿度传感器检测温湿度&#xff0c; 通过lcd1602显示屏各个参数&#xff0c;四个按键分别可以增加温湿度的阈值&#xff0c; 如果超过阈值&#xff0c;则…
阅读更多...
【cocos creator】按照行列数创建格子布局

【cocos creator】按照行列数创建格子布局

调用 this.creatLayout(5, 5, this.boxNode, this.rootNode) //限制数量 this.creatLayout(5, 5, this.boxNode, this.rootNode, cc.v3(0, 0), 10, 10, 23) /*** 创建格子布局* param xCount 列数量* param yCount 行数量* param prefab 预制体* param root 根节点* param root…
阅读更多...
211-基于FMC的1路1.5G ADC 1路 2.5G DAC子卡

211-基于FMC的1路1.5G ADC 1路 2.5G DAC子卡

一、板卡概述 FMC-1AD-1DA-1SYNC是我司自主研发的一款1路1G AD采集、1路2.5G DA回放的FMC、1路AD同步信号子卡。板卡采用标准FMC子卡架构&#xff0c;可方便地与其他FMC板卡实现高速互联&#xff0c;可广泛用于高频模拟信号采集等领域。 二、功能介绍 2.1 原理框图 2.2 硬件…
阅读更多...
前端性能优化（理念篇）

前端性能优化（理念篇）

前端性能优化&#xff08;理念篇&#xff09; 前言 其实前端性能优化&#xff0c;按照我的理解&#xff0c;首先你公司的硬件条件跟其它资源跟的上&#xff0c;比如服务器资源&#xff0c;宽带怎么样&#xff0c;还有后端接口响应如何&#xff0c;这些资源都具备后&#xff0…
阅读更多...
Y3编辑器文档4：触发器1（界面及使用简介、变量作用域、入门案例）

Y3编辑器文档4：触发器1（界面及使用简介、变量作用域、入门案例）

文章目录 一、触发器简介1.1 触发器界面1.2 ECA语句编辑及快捷键1.3 参数设置1.4 变量设置1.5 实体触发器1.6 触发器复用 二、触发器的多层结构2.1 子触发器&#xff08;在游戏内对新的事件进行注册&#xff09;2.2 触发器变量作用域 三、入门案例3.1 使用触发器实现瞬间移动3.…
阅读更多...
3D相框案例讲解（详细）

3D相框案例讲解（详细）

前言 通过现阶段的学习&#xff0c;我们已经掌握了HTML&#xff0c;CSS和JS部分的相关知识点&#xff0c;现在让我们通过一篇案例&#xff0c;来巩固我们近期所学的知识点。 详细视频讲解戳这里 任务一 了解目标案例样式 1.1了解案例 3D相框 1.2 分析案例 首先我们看到一个…
阅读更多...
网络安全漏洞挖掘之漏洞SSRF

网络安全漏洞挖掘之漏洞SSRF

SSRF简介 SSRF(Server-Side Request Forgery:服务器端请求伪造是一种由攻击者构造形成由服务端发起请求的一个安全漏洞。一般情况下&#xff0c;SSRF攻击的目标是从外网无法访问的内部系统。&#xff08;正是因为它是由服务端发起的&#xff0c;所以它能够请求到与它相连而与外…
阅读更多...
简单的Java小项目

简单的Java小项目

学生选课系统 在控制台输入输出信息&#xff1a; 在eclipse上面的超级简单文件结构&#xff1a; Main.java package experiment_4;import java.util.*; import java.io.*;public class Main {public static List<Course> courseList new ArrayList<>();publi…
阅读更多...
VPN模式

VPN模式

拓扑结构 实验图&#xff1a; 路由器router 配置 DHCP配置 需要右键激活 路由器项配置网关 dns项配置ip DNS服务配置 正向区域 选择不允许动态更新 反向区域 创建主机 正向 验证是否创建成功 反向查找区域 输入网段 使用默认名称---不允许动态更新 KALI机的验证 web服务…
阅读更多...
IS-IS协议

IS-IS协议

IS-IS协议介绍 IS-IS&#xff08;Intermediate System to Intermediate System&#xff09;协议是一种链路状态的内部网关协议&#xff08;IGP&#xff09;&#xff0c;用于在同一个自治系统&#xff08;Autonomous System, AS&#xff09;内部的路由器之间交换路由信息。IS-I…
阅读更多...
Git-基础操作命令

Git-基础操作命令

目录 Git基础操作命令 case *查看提交日志 log 版本回退 get add . Git基础操作命令 我们创建并且初始化这个仓库以后&#xff0c;我们就要在里面进行操作。 Git 对于文件的增删改查存在几个状态&#xff0c;这些修改状态会随着我们执行Git的命令而发生变化。 untracked、…
阅读更多...
Java 枚举

Java 枚举

目录 枚举是什么 常用方法 构造方法 枚举的优缺点 枚举和反射 实现单例模式 枚举是什么 枚举&#xff08;enum&#xff09;&#xff1a;是一种特殊的类&#xff0c;用于定义一组常量&#xff0c;将其组织起来。枚举使得代码更具有可读性和可维护性&#xff0c;特别是在处…
阅读更多...
服务器限制某个端口只允许特定IP访问（处理第三方依赖漏洞）

服务器限制某个端口只允许特定IP访问（处理第三方依赖漏洞）

最近项目部署之后&#xff0c;有些客户开始进行系统系统漏洞扫描&#xff0c;其中出现问题多的一个就是我们项目所依赖的Elasticsearch&#xff08;es检索服务&#xff09;&#xff0c;很容易就被扫出来各种高危漏洞&#xff0c;而且这些漏洞我们在处理起来是很棘手的&#xff…
阅读更多...
安卓 文件管理相关功能记录

安卓 文件管理相关功能记录

文件管理细分为图片、视频、音乐、文件四类 目录 权限 静态声明权限 动态检查和声明权限方法 如何开始上述动态申请的流程 提示 图片 获取图片文件的对象列表 展示 删除 视频 获取视频文件的对象列表 获取视频file列表 按日期装载视频文件列表 展示 播放 删除…
阅读更多...
Springmvc初学

Springmvc初学

什么是springmvc springmvc框架它是spring框架的一个分支。它是按照mvc架构思想设计的一款框架。springmvc的主要作用: 接收浏览器的请求数据&#xff0c;对数据进行处理&#xff0c;然后返回页面进行显示。 为什么要学习springmvc 如何使用springmvc&#xff1f; 1.创建maven…
阅读更多...
知从科技总经理受邀参加上海临港新片区商会“湖畔TECS”技术分享沙龙（第五期）

知从科技总经理受邀参加上海临港新片区商会“湖畔TECS”技术分享沙龙（第五期）

11月26日&#xff0c;上海知从科技有限公司创始人陈荣波先生受邀出席临港新片区商会 “湖畔TECS”技术分享沙龙&#xff08;第五期&#xff09;活动&#xff0c;并在活动上为参会嘉宾们做了主题分享。本次活动由临港新片区商会主办&#xff0c;智能网联汽车创新联盟协办&#x…
阅读更多...
Vue中纯前端实现导出简单Excel表格的功能

Vue中纯前端实现导出简单Excel表格的功能

Vue 前端Excel导出 Vue中纯前端导出简单Excel表格的方法(使用vue-json-excel插件) 前言 在许多的后台系统中少不了导出Excel表格的功能&#xff0c;在项目中纯前端使用vue-json-excel插件来实现简单Excel表格的导出功能。 使用方法 1、安装依赖 npm install vue-json-exc…
阅读更多...
QT6 Socket通讯封装（TCP/UDP）

QT6 Socket通讯封装（TCP/UDP）

为大家分享一下最近封装的以太网socket通讯接口 效果演示 如图&#xff0c;界面还没优化&#xff0c;后续更新 废话不多说直接上教程 添加库 如果为qmake项目中&#xff0c;在.pro文件添加 QT network QT core gui QT networkgreaterThan(QT_MAJOR_VERS…
阅读更多...
ip_done

ip_done

文章目录 路由结论 IP分片 数据链路层重谈Mac地址MAC帧报头局域网的通信原理MSS&#xff0c;以及MAC帧对上层的影响ARP协议 1.公司是不是这样呢? 类似的要给运营商交钱&#xff0c;构建公司的子网&#xff0c;具有公司级别的入口路由器 2&#xff0e;为什么要这样呢?? IP地…
阅读更多...
LearnOpenGL学习（高级OpenGL -＞ 高级GLSL，几何着色器）

LearnOpenGL学习（高级OpenGL -＞ 高级GLSL，几何着色器）

完整代码见&#xff1a;zaizai77/Cherno-OpenGL: OpenGL 小白学习之路 高级GLSL 内建变量 顶点着色器 gl_PointSoze : float 输出变量&#xff0c;用于控制渲染 GL_POINTS 型图元时&#xff0c;点的大小。可用于粒子系统。将其设置为 gl_Position.z 时&#xff0c;可以使点…
阅读更多...
最新文章

Copyright @ 2022~2023