compose 组件速查

kotlin compose 学习笔记

综述

compose基本就是类似react中的component，结合jetpack compose编译器生成可以组成成界面的函数块

如何设置函数为compose

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

通过添加注释(@Composable)告诉jet compose编译器讲这个函数编译为compose

Modifier

@Composable
fun GreetingText(message: String, modifier: Modifier = Modifier) {
    Text(
        text = message
    )
}

Modifier是compose中用于设置字体颜色等属性的对象，可以类比为CSS，对于一个compose不管你用不用modifier最好都传一个进去，因为你不能保证子元素也用不到，而且保持modifier传参可以提供配置一致性

MainActivity

MainActivity需要从ComponentActivity()这个父类继承，google给出的一个示例如下

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HappyBirthdayTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    GreetingText(
                        message = "Happy Birthday Sam!",
                        from = "From Emma",
                        modifier = Modifier.padding(8.dp)
                    )
                }
            }
        }
    }
}

重点是setContent，用来设置要生成的内容

Text

Text是最基础的compose函数，用于显示文本
使用text参数传递文本，另外也支持fontSize,modifier之类的格式参数

Row

横向排版，把元素排成一行，可以使用尾随lambda语法添加需要的compose函数(因为content是最后一个参数，由row中的内容组成的lambda)

Row {
    Text("First Column")
    Text("Second Column")
}

Column

纵向排版，其他和Row同理

Box

重叠布局，可以把元素堆叠在一起，默认越先声明的元素在图层中的位置越低，也可以通过modifier的zIndex属性手动指定元素的高度

Box(modifier) { // 图片作为背景，Text在图片上方
        Image(
            painter = image,
            contentDescription = null
        )
        GreetingText(
            message = message,
            from = from,
            modifier = Modifier
                .fillMaxSize()
                .padding(8.dp)
        )
    }

Image

用来渲染图片，图片资源通过R.drawable.resouceID管理,通过painterResource函数获取

Image(
    painter = painterResource(R.drawable.androidparty)
)

Button

Button是compose中的按钮元素，主要要设置onClick参数，这个参数接受一个lambda作为按钮触发的回调函数
Button内部还可以添加元素，和布局一样用尾随lambda添加元素，比如添加按钮提示词Text之类的

State / remember