jetpack compose(入门)
为什么我们需要一个新的UI 工具?
原因是 View.java 这个类实在是太大了,有太多的代码,它大到你甚至无法在Githubs上查看该文件,因为它实际上包含了 30000 行代码,这很疯狂,而我们所使用的几乎每一个Android UI 组件都需要继承于View.
Compose API 的原则
- Compose是一个声明式UI系统。 他的一切都是函数
- 在Compose的世界中,没有类的概念,全都是函数,并且都是顶层函数,因此不会有任何继承和层次机构问题。
- 组合优于继承
- 信任单一来源
Compose运行
Core
- 绘制(Draw) Draw 给了你访问Canvas的能力,因此你可以绘制你要的任何自定义View
- 布局(Layout) 通过布局,我们可以测量事物并相应地放置视图
- 输入(Input)开发人员可以通过输入访问事件并执行手势
- 语义(Semantics) 我们可以提供有关树的语义信息
Foundation
Foundation的核心是收集上面提到的所有内容,并共同创建一个抽象层 ,以使开发人员更轻松调用
Material
在这一层。所有的Material组件将会被提供,并且我们可以通过提供的这些组件来构建复杂的UI
插槽API
插槽API的出现是为了给开发人员留出了很多空间,以便他们可以执行所需的任何自定义操作
创建compose函数
Jetpack Compose是围绕 composable 函数来构建的。这些函数使你可以通过描述应用程序的形状和数据依赖,以编程方式定义应用程序的UI,而不是着眼于UI的构建过程。要创建 composable 函数,只需要在函数名前面加上一个@composable
注解即可。该注解必须用于不接受参数的可组合函数。因此,您无法直接预览 MessageCard 函数,而是需要创建另一个名为 PreviewMessageCard 的函数
布局
在Jetpack Compose中,你可以通过从其他 composable 函数中调composable 函数来构建UI层次结构。
column
要使重叠绘制的 Text 文本能够垂直排列,我们就需要使用到 Column 函数
在调用 Column() 时,可以传递参数给 Column() 来配置 Column 的大小、位置以及设置子元素的排列方式。
Material Design
首先,使用在您的项目中创建的 Material 主题 ComposeTutorialTheme
和 Surface 来封装 MessageCard 函数。ComposeTutorialTheme
是定义在你的ui/theme.kt
中的,在 @Preview 和 setContent 函数中都需要执行此操作。这样一来,可组合项即可沿用应用主题中定义的样式,从而在整个应用中确保一致性。
Material Design 是围绕 Color、Typography、Shape 这三大要素构建的。您将逐一添加这些要素。
重组
Compose 应用通过调用可组合函数将数据转换为界面。如果您的数据发生变化,Compose 会使用新数据重新执行这些函数,从而创建更新后的界面,此过程称为重组。Compose 还会查看各个可组合项需要哪些数据,以便只需重组数据发生了变化的组件,而避免重组未受影响的组件。
更改此变量不会触发重组的原因是 Compose 并未跟踪此更改。此外,每次调用 Greeting 时,都会将该变量重置为 false。
状态提升
在可组合函数中,被多个函数读取或修改的状态应位于共同祖先实体中,此过程称为状态提升。“提升”意为“提高”或“升级”。
使状态可提升,可以避免复制状态和引入 bug,有助于重复使用可组合项,并大大降低可组合项的测试难度。相反,不需要由可组合项的父级控制的状态则不应该被提升。可信来源属于该状态的创建者和控制者。
保留状态
var shouldShowOnboarding by rememberSaveable { mutableStateOf(true) }
运行应用,旋转屏幕,更改为深色模式,或者终止进程。除非您之前退出了应用,否则系统不会显示初始配置屏幕。