Android Basics with Compose course | Android Developers

<aside> 💡 Jetpack Compose is a modern toolkit for building Android UIs 1 Composable functions 可组合函数 @Composable function declaration 函数声明 2 Annotations 注解 @AnnotationName Annotation with parameters 带参数注解 @Annotation(name = "???",showSystemUi = true)

</aside>

@Composable (informs the compose compiler that this function is intended to convert data into UI)

Pascal case: 名词+全部词头大写
[Compose use]Modifier object: 装饰，调整UI的对象；a collection of elements that decorate or modify the behavior of Compose UI elements.
Layout 布局 function
Composable function
Interactive Logic

设计

Material Theming → Theme.kt
@Composable 举例
animation 动画

Material Components (MDC)

资源

icon - Jetpack Compose

Material Symbols and Icons - Google Fonts

这些图标可以按照SVG图形导入

Material Symbols guide | Google Fonts | Google for Developers

也可以使用库导入。

implementation("androidx.compose.material:material-icons-extended:1.6.2")

导入库会一并导入contentDiscription

Icon(
	imageVector=Icons.Filled.ExpandMore,
	contentDescription=stringResource(id=R.string.expand_button_content_description),
	tint = MaterialTheme.colorScheme.secondary
)

类设计和安卓基本构建逻辑 - Jetpack Compose

Modlues → Activities（修改依赖，维护 工程配置清单文件AndroidManifest.xml）

例子：静态 layout

@Composable
@Preview
fun DiceRollerApp() {
//    As App itself
//    页面包含图片和按钮
    DiceWithButtonAndImage(
        modifier = Modifier
            .fillMaxSize()
            .wrapContentHeight(Alignment.CenterVertically)
    )
}

@Composable
fun DiceWithButtonAndImage(modifier:Modifier = Modifier) {
    Column (
        modifier = modifier,
        horizontalAlignment = Alignment.CenterHorizontally
    ){
        Image(
            painter = painterResource(id = R.drawable.dice_1) ,
            contentDescription = "1"
        )
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { /*TODO*/ }) {
            Text(text = stringResource(id = R.string.roll))
        }
    }
}