使用compose自定义一个带头像的TopBar

仿QQ的topbar，记录一下。

可能使用到了material3

 原理很简单

定义（没添加点击）：

/**
 * 参数：
 * author：昵称
 * content：个性签名
 * profile：头像资源
 */
@Composable
fun MyTopBar(author: String, content:String, profile: Int) {
    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .height(90.dp),
        color = MaterialTheme.colorScheme.primary
    ) {
        // 垂直居中
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.padding(15.dp,0.dp)
            ) {
            Image(
                painter = painterResource(id = profile),
                contentDescription = "Contact profile picture",
                // 图片参数
                modifier = Modifier
                    .size(60.dp)
                    .clip(CircleShape) // 形状为圆形
                    .border(2.dp, MaterialTheme.colorScheme.onPrimary, CircleShape)
            )
            Spacer(modifier = Modifier.width(8.dp))
            Column (
                modifier = Modifier.width(150.dp)
                    ) {
                Text(text = author, style = MaterialTheme.typography.labelLarge,maxLines = 1)
                Spacer(modifier = Modifier.height(5.dp),)
                Text(text = content, style = MaterialTheme.typography.labelSmall,
                    overflow = TextOverflow.Ellipsis,
                    maxLines = 1
                    )
            }
            Spacer(modifier = Modifier.fillMaxWidth(0.8f))
            IconButton(onClick = { /* doSomething() */ }) {
                Icon(
                    imageVector = Icons.Filled.MoreVert,
                    contentDescription = "Localized description"
                )
            }
        }
    }
}

 调用

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    Sim3Theme {
//        Greeting("Android")
        MyTopBar("Meishaonv","miaoshaonvzhangshi",R.drawable.sweet_girl)

    }
}