一文带你了解 Jetpack Compose UI 框架

正文

请到「今天看啥」查看全文

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() {
    val modifier = Modifier.clickable(onClick = {
        Log.d("Andoter", this.javaClass.name)
        Toast.makeText(this@MainActivity, "Button 点击", Toast.LENGTH_SHORT).show()
    })

    Text(text = "Hello Compose!",modifier = modifier.padding(10.dp))
}

通过 Modifier.clickable 的方式实现设置点击事件。 Modifier 类不仅能够设置点击事件，还能够设置控件的布局属性。

• clickable() ：设置点击监听
• padding() ：在元素周围留出空间
• fillMaxWidth() ：使可组合项填充其父项给它的最大宽度
• preferredSize() ：指定元素的首选宽度和高度

2.4 预览

在 Compose 框架中为 Compose 函数提供预览能力，通过给 Compose 函数添加 @Preview 注解即可进行预览。在实际的开发中，预览函数不要发布到线上，所以最佳做法是单独创建不会被应用调用的预览函数用于查看实际效果，专门的预览函数可以提高性能，并且有利于以后更轻松地设置多个预览。

请到「今天看啥」查看全文