一文带你了解 Jetpack Compose UI 框架(1)

Jetpack Compose 是围绕 Compose 函数构建的，在开发时只需描述应用界面的样式布局和数据依赖关系，而不必关注界面的构建过程。给一个函数添加 @Composable 注解即创建了一个 Compose 函数。注意，Compose 函数只能在其他 Compose 函数的范围内调用。 下面我们将上面示例中的 Text 移动到自定义的 Compose 函数中。

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContent {

HelloCompose()

}

}

@Composable

fun HelloCompose() {

Text(“Hello Compose!”)

}

}

2.3 设置点击监听

---

除了使用 Text 函数，还有其它的基础函数供我们使用，比如 Button、Image 等。那么如何给 UI 控件设置点击监听呢？在 Compose 框架中提供了两种方式：

• 对于类似 Button 函数的这种，提供了 onClick 函数式接口供外部设置点击监听；

• 对于类似 Text 函数这种，没有提供显式接口设置的，通过 Modifier 类设置点击监听；

Button 函数设置点击事件

@Composable

fun TextButton() {

Button(

onClick = {

Log.d(“Andoter”, this.javaClass.name)

Toast.makeText(this@MainActivity, “Button 点击”, Toast.LENGTH_SHORT).show()

}

) {

Text(text = “Hello Compose!”, color = Color.Red)

}

}

通过设置 onClick 函数即可实现点击实现，注意 Button 函数本身没有设置文本内容，需要通过 Text 函数设置显示文本内容。

Text 函数设置点击事件

@Composable

fun ClickedText()