前言
在Android世界中，我们使用LinearLayout，相对布局以及什么不设计UI。然后我们开始使用 ConstraintLayouts 来设计 UI。但我们仍然错过了在Android中设计声明性UI的诀窍。我们有很多不同的库可以做到这一点，但没有一个有原生的Android支持。
在Google IO '19中，Google推出了Jetpack Compose来创建声明性UI。因此，基本上，声明性UI意味着通过指定我们需要的一组特定的UI元素来创建UI，并以某种方式构建它。
为什么我们应该使用Jetpack Compose？
我们应该使用Jetpack compose，因为与我们今天编写的内容相比，使用它来编写更少的代码。例如，我们现在没有显式写入 XML 文件。此外，使用组合，我们可以通过使用Kotlin编写任何类型的UI。
因此，让我们逐一讨论如何使用jetpack compose。
步骤01.设置
首先，将 google（） 添加到项目的 build.gradle 文件中
allprojects {
repositories {
google()
jcenter()
}
}
步骤 02. App 的 Gradle
android {
defaultConfig {
...
minSdkVersion 21
}
buildFeatures {
// Enables Jetpack Compose for this module
compose true
}
// Set both the Java and Kotlin compilers to target Java 8.
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = "1.8"
}
composeOptions {
kotlinCompilerVersion "1.3.61-dev-withExperimentalGoogleExtensions-20200129"
kotlinCompilerExtensionVersion "0.1.0-dev06"
}
步骤 03. 项目的 gradle 文件
dependencies {
classpath 'com.android.tools.build:gradle:4.0.0-alpha01'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.60-eap-25"}
步骤 04. 最后，添加项目依赖项
implementation 'androidx.ui:ui-framework:0.1.0-dev06'
implementation 'androidx.ui:ui-layout:0.1.0-dev06'
implementation 'androidx.ui:ui-material:0.1.0-dev06'
implementation 'androidx.ui:ui-tooling:0.1.0-dev06'
现在，我们完成了项目的设置。让我们构建 UI。到目前为止，我们使用 setContentView 从 XML 文件扩充布局。但在本教程中，我们将使用Jetpack compose来设计布局文件。
步骤05.在活动文件中，
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
//your design
}
}
现在，我们将设计设置为 setContent。这里我们调用一个函数。我们使用可组合函数。因此，作为开发人员，让我们从Hello World开始。
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Text("Hello world!")
}
}
}
步骤06.让我们讨论如何创建可组合函数。
要创建可组合函数，我们需要使用@Composable注释。
@Composable
fun helloWorld() {
Text(text = "Hello World")
}
并在 setContent{} 中调用 helloWorld（）
- 可组合函数只能从另一个可组合函数调用。
- 可组合函数是我们用于在屏幕上绘制 UI 的函数。所有写在其中的小部件都呈现在屏幕上。
步骤07.让我们定义一个容器。
在这里，如果我们需要在线性布局中具有垂直模式的方向行为。在这里，我们使用列，
Column {
//the inside widgets
}
这将按垂直顺序堆叠线性布局中的元素。在这里，让我们用一个按钮的例子来讨论，
Column {
Button {
Clickable(onClick = {
Log.d(TAG, "This is Button 1")
}) {
Text("Click Me", style = TextStyle(color = Color.White))
}
}
Spacer(modifier = LayoutHeight(16.dp))
Button(backgroundColor = Color.White) {
Clickable(onClick = {
startActivity(
Intent(
this@MainActivity,
UserListActivity::class.java
)
)
}) {
Text(text = "This is Button 2", style = TextStyle(color = Color.Black))
}
}
}
在这里，我们设计了两个按钮
- 在我们第一次声明一个Button小部件的地方，我们在其中实现了一个Clickable负责单击按钮的控件。在第一个按钮中，它将打印一个日志。TextStyle在此，我们使用()更新了按钮中文本的样式。
- 然后我们添加了一个Spacer，它在两个 16dp 单位的按钮之间添加了一个空格。
- 最后，我们实现了第二个按钮，点击它会打开一个新的活动。在这里，我们更改了文本样式并将 of 更改backgroundColor为Button白色。
输出
如果我们想在android中采用Material design原理的设计，可以使用 MaterialTheme()
MaterialTheme {
// Widgets 1
// Widgets 2
// Widgets 3
}
步骤 08。让我们讨论如何使用 Jetpack Compose 构建列表，
让我们首先创建一个名为 UserListActivity 的新活动，并在其中添加，
class UserListActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MaterialTheme {
populateUser()
}
}
}}
在此，我们添加了一个小部件 Material Theme，然后为其添加了一个子可组合函数populateUser()。
现在，populateUser() 看起来像，
@Preview
@Composable
private fun populateUser() {
setupList(UserDataSource.getUsers())
}
在这里，我们将有另一个可组合函数setupList()，我们将从数据源传递用户列表。它可以来自本地存储、静态数据甚至来自 API。
我们的用户数据类看起来像，
data class User(val id: Int = 0, val name: String = "", val email: String = "")
现在，在我们的示例中，我们将创建一个显示用户名和电子邮件的列表。
在setupList() 函数中，
@Composable
private fun setupList(users: List<User>) {
VerticalScroller {
Column {
users.let {
it?.forEach { user ->
printUser(user)
}
}
}
}
}
我们将添加一个名为的小部件，该小部件VerticalScroller将负责显示用户列表。在小部件中，我们添加了一个Column这样，我们可以让所有用户垂直堆叠。然后我们遍历以单独获取用户并将其传递给printUser()可组合函数。
在printUser()函数中，
@Composable
private fun printUser(user: User) {
Ripple(bounded = true) {
Clickable(
onClick = {
Toast.makeText(
this@UserListActivity,
"You click on name ${user.name}",
Toast.LENGTH_SHORT
).show()
}
) {
Card {
Container(
padding = EdgeInsets(16.dp),
modifier = LayoutWidth.Fill,
alignment = Alignment.CenterStart
) {
Column {
Text(text = user.name, style = MaterialTheme.typography().h6)
Text(text = user.email, style = MaterialTheme.typography().body1)
}
}
}
}
}
}
我们首先创建一个Column小部件，在其中包含两个 Text，其中包含名称和电子邮件。在此，名称的样式为Heading6，电子邮件的样式为body1。这与我们在 HTML 中传递样式的方式非常相似。
现在，我们将 wrap 使用Container小部件从四周添加一些填充，16dp并将为 Fill 添加一个修饰符。在这里，EdgeInsets意味着它将从各个方面以及在 XML 中添加 16dp 的LayoutWidth.Fill填充match_parent。alignmentin Container 小部件是为了确保它的孩子从哪里开始。
然后，我们将它包装在下面Card，为每个项目提供一个卡片视图类型的视图。
现在，我们添加Ripple小部件以在单击它时产生涟漪效果。Clickable 类似于我们上面所做的。在这里，单击时，我们会显示祝酒词。
在 Compose 中管理状态
在构建 UI 时，我们在调用代码时在实例中设置数据。但是当数据发生变化并且我们必须用新数据更新 UI 时，我们将如何管理 UI 中的数据？
为了在 Jetpack compose 中管理状态，我们@Model在类前面使用。因此，它有助于观察数据的变化。一旦数据发生变化，它会重绘数据发生变化的 UI，而不是整个 UI 树。
@Model 是线程安全的
注意：如果我们@Preview 在任何可组合函数之上添加，我们可以在将其运行到实际设备之前在 Android Studio 本身中查看该函数，以确定它的外观。这类似于我们过去设计时查看 XML 文件预览的方式。
作者：Himanshu Singh
链接:https://blog.mindorks.com/using-jetpack-compose-to-build-ui-in-android
