jetpack compose
文章平均质量分 93
jetpack compose 简化 UI 开发
呆呆的猫
爱发呆 爱抹茶 一直在路上
展开
-
【Android-JetpackCompose】13、实战在线课程 App
然后,用 Scaffold 里的 BottomNavigation 做底部导航,每个导航项有 Icon 和 Text,维护一个 currentNavigationIndex:当用户选择某导航项时则更新此值,并通过 selected 字段展示被选中的效果。首先,构造 NavigationItem 的 data class,初始化 navigationItems 列表,其中每一项对应了底部的一个导航项。原创 2023-05-27 15:34:59 · 1167 阅读 · 0 评论 -
【Android-JetpackCompose】3、state 状态的提升、恢复和管理
通过状态变化,导致的 @Composable 函数重组,我们可以得到新的 UI 界面。应用中的状态是指可以随时间变化的任何值。这是一个非常宽泛的定义,从 Room 数据库到类的变量,全部涵盖在内。所有 Android 应用都会向用户显示状态。原创 2022-10-05 19:54:05 · 960 阅读 · 0 评论 -
【Android-JetpackCompose】1、实战聊天界面:@Compose 可组合函数、用 Row() 和 Column() 设计布局、MaterialDesign 样式、列表、动画
为了记录消息是否已展开,可以用 remember 将本地状态存储到内存中,并跟踪传递给 mutableStateOf 的值的变化,当值更新时,系统会自动重绘使用此值的 @Composable,这称为。它使用更少的代码、直观的 Kotlin API,可以简化 Android 界面开发。布局是多层次的,每个 @Compose 函数中,又包含其他 @Compose 函数,就像前端 Vue 的父组件和子组件一样。构建的,这些函数可以描述UI和依赖的数据,不需关注界面的构建过程(初始化元素、添加到父级布局等)。原创 2022-10-03 18:22:40 · 1226 阅读 · 0 评论 -
【Android-JetpackCompose】10、基于 Compose 基本布局的健身 App
因为每个板块,都有一个标题,一个槽位。标题包含一些与其相关的间距和样式信息。可以使用不同的内容动态填充槽位,具体取决于版块。在 MySoothe 主屏幕中,有多个版块都遵循同一模式。每个版块都有一个标题,其中包含的内容因版块而异。接下来,您要实现的可组合项是“Align your body”元素。接下来要实现的是 Grid,而不是上文的 Row。原创 2022-10-07 18:39:25 · 692 阅读 · 0 评论 -
【Android-JetpackCompose】5、三阶段:组合、布局、绘制,架构分层,设计原则、性能最佳实践
通过将较小的构建块组合成更高级别的组件,按需自定义组件的难度要小的多。Material Surface:用于提供背景、形状和点击处理方式等。CompositionLocalProvider:用于在启用或停用相应按钮时更改内容的 alpha 值ProvideTextStyle:用于设置要使用的默认文本样式Row:用于为相应按钮的内容提供默认布局政策为了使结构更加清晰,我们省略了一些参数和注释,但整个组件只有 40 行左右的代码,因为它只是组合了这 4 个组件来实现该按钮。原创 2022-10-06 17:31:52 · 739 阅读 · 0 评论 -
【Android-JetpackCompose】12、动画、state、性能优化
尽量嵌套,例如下例中当 contact 变量变化时,只会调用 Text(),而不会调用 ContactCard() 和 MyCard(),因为他们并不读取 contact 变量。如果不提供key,默认会以列表的下标做key,导致每当项在列表中移动时,就会重组,导致性能低下。注意 key 需保证唯一。我们不要再组合中,对读取到的值,再次写入,这违反了 Compose 的核心假设,会导致每帧都重组。下例中,因为每帧 color 变量都会变化,导致每帧都会重组。原创 2022-10-08 20:05:34 · 972 阅读 · 0 评论 -
【Android-JetpackCompose】8、实战 Compose 滑动列表、动画、样式
到目前为止,已经在 Column 中显示了两条问候语。他们相当于 Android View 中的 RecyclerView(比后者性能更优),用于显示可滚动列,他们只会渲染屏幕上可见的内容(而不是全部列表数据),从而提升性能。用 remember 的话,每次配置更改(如旋转屏幕)、进程终止时都会重置,因为其只在 @Composable 被 composition 时起作用,因为旋转屏幕后整个 Activity 都丢失了,所有 state 也就都丢失了。原创 2022-10-07 11:58:43 · 1054 阅读 · 0 评论 -
【Android-JetpackCompose】4、可组合项的生命周期、@Composable 修饰符、附带效应
不过,在某些情况下,您可能希望在效应中捕获某个值,但如果该值发生变化,您不希望效应重启。Compose 编译器,用调用点标识,各可组合项。此外,更新 derivedStateOf 生成的状态不会导致可组合项在声明它的位置重组,Compose 仅会对返回状态为已读的可组合项(在本例中,指 LazyColumn 中的可组合项)进行重组。如果列表底部新增了一个 movie,Compose 可以重复使用组合中既有的实例,因为这些实例在列表中的位置没有发生变化,因此这些实例的 movie 输入是相同的。原创 2022-10-05 22:32:33 · 1212 阅读 · 0 评论 -
【Android-JetpackCompose】7、布局、Material 组件和布局、自定义布局
每个界面元素都有一个父元素,还可能有多个子元素。此外,每个元素在其父元素中都有一个位置,指定为 (x, y) 位置;也都有一个尺寸,指定为 width 和 height。父元素定义其子元素的约束条件。元素需要在这些约束条件内定义尺寸。约束条件可限制元素的最小和最大 width 和 height。如果某个元素有子元素,它可能会测量每个子元素,以帮助确定其尺寸。在界面树中布置每个节点的过程分为三个步骤。测量所有子项确定自己的尺寸放置其子项layout 修饰符仅更改调用可组合项。原创 2022-10-06 22:57:43 · 1267 阅读 · 0 评论 -
【Android-JetpackCompose】6、开发环境:Compose 工具、Android Studio 操作、Kotlin 语法糖
我们以 Canvas 可组合项为例,它将一个以 DrawScope 为接收器的函数 (onDraw: DrawScope.() -> Unit) 作为参数,从而允许代码块调用 DrawScope 中定义的成员函数。事实上,如果您要传递的唯一一个参数是该尾随 lambda,也就是说,如果最后一个参数是 lambda,并且您不会传递其他任何参数,则您可以完全省略圆括号。例如,所有布局的最后一个参数(如 Column() 可组合函数)均为 content,它是一个发出子界面元素的函数。原创 2022-10-06 21:15:23 · 1016 阅读 · 0 评论 -
【Android-JetpackCompose】11、主题设置:Theme、Colors、Typography、Shapes
Compose 没有提供用于提取组件样式(例如,Android View 样式或 CSS 样式)的明确方法。由于所有 Compose 组件都是用 Kotlin 编写的,因此还可通过其他方法来实现相同的目的。您可以改为创建自己的自定义组件库,并在整个应用中使用这些组件。教程:https://developer.android.com/courses/pathways/compose?原创 2022-10-07 23:38:09 · 1481 阅读 · 0 评论 -
【Android-JetpackCompose】9、将 SunFlower 项目从 View 迁移到 Compose
有鉴于此,以及为了实现可重用性,最好将 LiveData 的使用和监听拆分到不同的可组合项中。如需从可组合项观察 LiveData,请使用 LiveData.observeAsState() 函数,该函数开始观察 LiveData,并通过 State 对象表示它的值。组合必须遵循 fragment 的视图生命周期,Compose 界面 View 类型才能保存状态,并且在发生过渡或窗口过渡时让 Compose 界面元素保留在界面上。在过渡期间,ComposeView 本身仍然可见,即使其与窗口分离也是如此。原创 2022-10-07 14:39:07 · 769 阅读 · 3 评论 -
【Android-JetpackCompose】2、Compose 编程思想
Composable 函数可能会像每帧一样重复执行,所以应简洁快速,复杂的逻辑尽量放在后台协程中,并将协程的结果传给 @Composable 函数。例如,如果您的 widget 尝试读取设备设置,它可能会在一秒内读取这些设置数百次,这会对应用的性能造成灾难性的影响。我们只需用 kotlin 声明 UI,并且改变变量,剩下的都交给 Compose 库:当变量改变时,其会帮我们重绘依赖于此变量的 UI。所以应避免修改 @Composable 函数的变量,因为应避免这些附带效应,避免线程不安全。原创 2022-10-04 16:09:39 · 584 阅读 · 0 评论