Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >安卓软件开发:Jetpack Compose中常见的核心概念总结-7

安卓软件开发:Jetpack Compose中常见的核心概念总结-7

原创
作者头像
Nimyears
发布于 2024-11-07 00:46:49
发布于 2024-11-07 00:46:49
1410
举报

31. Pager组件(类似ViewPager)

HorizontalPager - 横向分页

代码语言:kotlin
AI代码解释
复制
val pagerState = rememberPagerState()

HorizontalPager(
    count = 5,
    state = pagerState
) { page ->
    Text("Page: $page", modifier = Modifier.fillMaxSize())
}
  • HorizontalPager: 实现类似ViewPager的横向分页效果。

VerticalPager - 纵向分页

代码语言:kotlin
AI代码解释
复制
VerticalPager(
    count = 5,
    state = rememberPagerState()
) { page ->
    Text("Page: $page", modifier = Modifier.fillMaxSize())
}
  • VerticalPager: 实现纵向的分页效果。

32. 可交互的按钮和切换

ToggleButton - 切换按钮

代码语言:kotlin
AI代码解释
复制
var toggled by remember { mutableStateOf(false) }

IconToggleButton(
    checked = toggled,
    onCheckedChange = { toggled = !toggled }
) {
    Icon(
        imageVector = if (toggled) Icons.Default.Favorite else Icons.Default.FavoriteBorder,
        contentDescription = "Favorite"
    )
}
  • IconToggleButton: 带有图标的切换按钮。

33. 图标和资源加载

Icons.Filled - 使用内置图标

代码语言:kotlin
AI代码解释
复制
Icon(Icons.Filled.Home, contentDescription = "Home")

Load Image - 加载图片资源

代码语言:kotlin
AI代码解释
复制
Image(
    painter = painterResource(id = R.drawable.sample_image),
    contentDescription = "Sample Image",
    modifier = Modifier.size(100.dp)
)

34. 自定义绘制

Canvas - 绘制图形

代码语言:kotlin
AI代码解释
复制
Canvas(modifier = Modifier.size(100.dp)) {
    drawCircle(Color.Red, radius = size.minDimension / 2)
}
  • Canvas: 自定义绘制组件,支持绘制圆、矩形、路径等形状。

drawBehind Modifier - 在组件后绘制

代码语言:kotlin
AI代码解释
复制
Text(
    "Draw Behind Example",
    modifier = Modifier
        .padding(16.dp)
        .drawBehind {
            drawRect(Color.Yellow)
        }
)
  • drawBehind: 在组件后方绘制背景图形。

35. 共享ViewModel

Shared ViewModel - 共享的ViewModel

代码语言:kotlin
AI代码解释
复制
val viewModel: MyViewModel = viewModel()

viewModel.data.observeAsState().value?.let { data ->
    Text("Data: $data")
}
  • viewModel: 在Composable中获取ViewModel实例并共享数据。

36. Snackbars和Toasts

Snackbar - 显示临时消息

代码语言:kotlin
AI代码解释
复制
val scaffoldState = rememberScaffoldState()

Scaffold(
    scaffoldState = scaffoldState
) {
    Button(onClick = {
        scaffoldState.snackbarHostState.showSnackbar("Hello Snackbar")
    }) {
        Text("Show Snackbar")
    }
}

Toast - 显示提示消息

代码语言:kotlin
AI代码解释
复制
Toast.makeText(context, "Hello, World!", Toast.LENGTH_SHORT).show()

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Android 使用CodeBuddy提高开发效率
  随着时代的变化,AI的兴起,作为开发者,完成开发任务在之前我们需要充分的理解需求,寻找相关文档,进行功能的开发,而在今天我们可以用很多开发工具,帮助我们智能编程,快速完成功能开发。
晨曦_LLW
2025/06/02
1290
Android 使用CodeBuddy提高开发效率
安卓软件开发:使用Jetpack Compose和Room开发NimWishApp-上篇
在Demo中,采用了最新的Jetpack ComposeM3技术栈,结合了Room数据库实现数据的持久化存储,提供了一个从UI层到数据层的完整解决方案,展示了从0到1的开发。
Nimyears
2024/10/03
5130
安卓软件开发:Jetpack Compose中常见的核心概念总结-3
Nimyears
2024/11/01
1340
代码实现第三方登录
第三方登录 复制Row(horizontalArrangement = Arrangement.SpaceBetween,verticalAlignment = Alignment.CenterVertically) { Row( Modifier .height(1.dp) .weight(1f) .background(Color(0xFFCFC5C5)) .p
艳艳代码杂货店
2021/09/26
7570
安卓软件开发:Jetpack Compose中常见的核心概念总结-8
Nimyears
2024/11/08
1880
compose--初入compose、资源获取、标准控件与布局
compose正式发布已经一年多了,越来越多的开发人员选择使用它,声明式UI也是未来的一个主流趋势,本人也是一年前学习后,并没有真正的使用,所以本着边学习,边分享的心态,准备写个compose系列的文章 首先compose目前只支持kotlin,基于google对移动端的鸿图,未来应该也不会支持其他语言,和传统安卓的xml布局不同,compose是通过kotlin定义一个一个组件,由于是通过代码定义的组件,每个组件都可以很方便的重用,这点在UI开发时确实便利了不少。至于声明式UI和命令式UI的区别,相信你会在后续实际使用时有很大的感触
aruba
2022/12/06
6.8K0
compose--初入compose、资源获取、标准控件与布局
Jetpack-Compose 学习笔记(二)—— Compose 布局你学会了么?
在前一篇笔记中,我们知道了 Compose 布局的一些基本知识,这篇笔记就来详细看看 Compose 布局吧!还有些 Compose 其他的知识,根据官方的实例,我们边看边说。
修之竹
2022/08/19
3.5K0
Jetpack-Compose 学习笔记(二)—— Compose 布局你学会了么?
Android Compose 新闻App(六)导航动画、WebView、浮动按钮、底部导航
  在上篇文章中完成了页面的导航,而在本篇文章中将会有更多新的Compose用法,一起来看看吧。
晨曦_LLW
2022/05/03
5.2K0
Android Compose 新闻App(六)导航动画、WebView、浮动按钮、底部导航
安卓软件开发:Jetpack Compose中常见的核心概念总结-6
Nimyears
2024/11/06
1830
安卓软件开发:Jetpack Compose中常见的核心概念总结-4
Nimyears
2024/11/04
1660
安卓软件开发:使用Jetpack Compose和M3的轮播图和列表App-上篇
这个应用中常见的 UI 需求是轮播图、列表和弹窗,使用 Jetpack Compose 和 M3 的组件,可以快速、高效编码现代化的 UI。
Nimyears
2024/10/12
9190
安卓软件开发:Jetpack Compose中常见的核心概念总结-终篇
Nimyears
2024/11/13
2040
Android Compose开发
Compose 编译后不是转化为原生的 Android 上的 View 去显示,而是依赖于平台的Canvas ,在这点上和 Flutter 有点相似,简单地说可以理解为 Compose 是全新的一套 View 。
六月的雨
2024/02/28
5940
Android Compose开发
Android Compose 新闻App(七)网络图片加载、Tab、HorizontalPager
  在上一篇文章中,新增加了一个主页面,那么这个主页面用来做什么呢?主页面的底部我分为两个部分,目前是首页和收藏,首页需要显示好几个类型的新闻数据,那么我们先来做这一步,本文效果图如下:
晨曦_LLW
2022/05/04
2.2K0
Android Compose 新闻App(七)网络图片加载、Tab、HorizontalPager
Android | Compose 初上手
Jetpack Compose 是用于构建原生 Andorid 界面的新工具包,Compose 使用了更少的代码,强大的工具和直观的 Kotlin Api 简化并且加快了 Android 上界面的开发。
345
2022/06/12
5.6K0
Android | Compose 初上手
安卓软件开发:Jetpack Compose中常见的核心概念总结-9
Nimyears
2024/11/11
2000
安卓软件开发:Jetpack Compose中常见的核心概念总结-1
Nimyears
2024/10/30
2240
安卓软件开发:Jetpack Compose中常见的核心概念总结-5
Nimyears
2024/11/05
2540
安卓软件开发:实现高级布局顺序App的技术难点
在安卓软件开发中,布局设计影响界面的美观性,还会直接影响用户体验。尤其在满足产品原型需求时,复杂布局的实现可能会遇到一些挑战。本文将通过实际场景,展示如何实现复杂布局顺序及布局重叠效果。
Nimyears
2024/10/29
3210
Android Jetpack Compose开发体验
作为Android开发者,xml布局和Compose布局大家应该很熟悉,而Compose作为Android平台上第二款支持声明式UI的框架,第一款是Flutter框架了。
Rouse
2024/06/11
5350
Android Jetpack Compose开发体验
推荐阅读
相关推荐
Android 使用CodeBuddy提高开发效率
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档