当前位置：首页 > news >正文

【JetCompose】入门教程实战基础案例03之凡尔赛朋友圈

news 2026/5/12 21:37:28

朋友圈效果页面

效果预览

核心代码

@Composable funArtistCard(){Column(modifier=Modifier.padding(8.dp)){Row(verticalAlignment=Alignment.CenterVertically){Box(){Image(painter=painterResource(id=R.drawable.avatar02),contentDescription=null,modifier=Modifier.size(40.dp).clip(CircleShape))Icon(Icons.Filled.Check,contentDescription=null,tint=Color.White,modifier=Modifier.align(Alignment.BottomEnd).size(16.dp).clip(CircleShape)// 圆角效果.background(Color.Black).border(1.dp,Color.White,CircleShape))}Column(Modifier.padding(start=8.dp,end=8.dp)){Text("Alfred Sisley")Text("3 minutes ago")}}Spacer(modifier=Modifier.height(4.dp))Card{Image(painter=painterResource(id=R.drawable.sky01),contentDescription=null,modifier=Modifier.fillMaxWidth())}}}

预览

@Preview(showBackground=true)@Composable funPreviewArtistCard(){MyJetCompomApp01Theme{ArtistCard()}}

mainActivity使用

classMainActivity07:ComponentActivity(){override funonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)enableEdgeToEdge()setContent{MyJetCompomApp01Theme{Scaffold(modifier=Modifier.fillMaxSize().padding(10.dp)){innerPadding->Box(modifier=Modifier.padding(innerPadding)){ArtistCard()}}}}}}

添加按钮事件

classMainActivity07:ComponentActivity(){override funonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)enableEdgeToEdge()setContent{MyJetCompomApp01Theme{Scaffold(modifier=Modifier.fillMaxSize().padding(10.dp)){innerPadding->Column{Box(modifier=Modifier.padding(innerPadding)){ArtistCard()}Button(modifier=Modifier.fillMaxWidth(),onClick={Toast.makeText(this@MainActivity07,"Follow",Toast.LENGTH_SHORT).show()},colors=ButtonDefaults.buttonColors(containerColor=Color.Red,contentColor=Color.White),// enabled = false,){Text("Follow")}}}}}}}