【JetCompose】入门教程实战基础案例02之列表项显隐效果

子组件item预览

dataclassMessage(val author:String,val body:String)@Composable funMessageCard(message:Message,modifier:Modifier){Box(modifier=modifier.background(MaterialTheme.colorScheme.primary,// 全屏宽度shape=MaterialTheme.shapes.medium).fillMaxWidth()){Row(verticalAlignment=Alignment.CenterVertically){Image(painter=painterResource(id=R.drawable.avatar),contentDescription=null,Modifier.padding(all=8.dp).size(40.dp).clip(CircleShape))Column(modifier=Modifier.padding(end=8.dp)){Text(text="Hello ${message.author}",color=MaterialTheme.colorScheme.onPrimary)Text(text=message.body,color=MaterialTheme.colorScheme.onPrimary)}}}}

预览效果

@Preview(name="MessageCardPreview",showBackground=true)@Composable funPreviewMessageCard(){MessageCard(Message("gaofeng","hello world"),modifier=Modifier.padding(all=8.dp))}

子组件改造

描述文字添加背景，圆角

Column(modifier=Modifier.padding(end=8.dp)){Text(text="Hello ${message.author}",color=MaterialTheme.colorScheme.onPrimary)Spacer(modifier=Modifier.height(4.dp))Surface(shape=MaterialTheme.shapes.medium,shadowElevation=1.dp){Text(text=message.body,modifier=Modifier.padding(horizontal=4.dp),)}}

as中预览效果

模拟数据生成列表

Conversation组件

@Composable funConversation(messages:List<Message>){LazyColumn(contentPadding=PaddingValues(0.dp,4.dp),verticalArrangement=Arrangement.spacedBy(4.dp)){items(messages){MessageCard(message=it,modifier=Modifier)}}}@Preview(name="ConversationPreview",showBackground=true)@Composable funPreviewConversation(){Conversation(SampleData.conversationSample)}

模拟数据

importcom.gaofeng.comps.Message/** * SampleData for Jetpack Compose Tutorial */object SampleData{// Sample conversation dataval conversationSample=listOf(Message("Lexi","Test...Test...Test..."),Message("Lexi","""ListofAndroid versions:|AndroidKitKat(API19)|AndroidLollipop(API21)|AndroidMarshmallow(API23)|AndroidNougat(API24)|AndroidOreo(API26)|AndroidPie(API28)|Android10(API29)|Android11(API30)|Android12(API31)""".trim()),Message("Lexi","""Ithink Kotlin is my favorite programming language.|It's so much fun!""".trim()),Message("Lexi","Searching for alternatives to XML layouts..."),Message("Lexi","""Hey,take a look at Jetpack Compose,it's great!|It's the Android's modern toolkitforbuilding nativeUI.|It simplifies and acceleratesUIdevelopment on Android.|Less code,powerful tools,and intuitive Kotlin APIs:)""".trim()),Message("Lexi","It's available from API 21+ :)"),Message("Lexi","Writing Kotlin for UI seems so natural, Compose where have you been all my life?"),Message("Lexi","Android Studio next version's name is Arctic Fox"),Message("Lexi","Android Studio Arctic Fox tooling for Compose is top notch ^_^"),Message("Lexi","I didn't know you can now run the emulator directly from Android Studio"),Message("Lexi","Compose Previews are great to check quickly how a composable layout looks like"),Message("Lexi","Previews are also interactive after enabling the experimental setting"),Message("Lexi","Have you tried writing build.gradle with KTS?"),)}

MessageCard组件核心逻辑

@Composable funMessageCard(message:Message,modifier:Modifier){Box(modifier=modifier.fillMaxWidth().padding(0.dp,8.dp)){Row(verticalAlignment=Alignment.CenterVertically){Image(painter=painterResource(id=R.drawable.avatar),contentDescription=null,Modifier.padding(all=8.dp).size(40.dp).clip(CircleShape))varisExpanded by remember{mutableStateOf(false)}val surfaceColor byanimateColorAsState(if(isExpanded)MaterialTheme.colorScheme.primaryelseMaterialTheme.colorScheme.surface)Column(modifier=Modifier.padding(end=8.dp).clickable{isExpanded=!isExpanded}){Text(text="Hello ${message.author}",color=MaterialTheme.colorScheme.primary)Spacer(modifier=Modifier.height(4.dp))Surface(shape=MaterialTheme.shapes.medium,shadowElevation=1.dp,color=surfaceColor,modifier=Modifier.animateContentSize().padding(1.dp)){Text(text=message.body,modifier=Modifier.padding(horizontal=4.dp),maxLines=if(isExpanded)Int.MAX_VALUEelse1,)}}}}}

Main组件核心逻辑

classMainActivity06:ComponentActivity(){override funonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)enableEdgeToEdge()setContent{MyJetCompomApp01Theme{Scaffold(modifier=Modifier.fillMaxSize().padding(10.dp)){innerPadding->// com.gaofeng.comps.MessageCard(Message("JetCompose", "Hello world"), modifier = Modifier.padding(innerPadding))Box(modifier=Modifier.fillMaxSize().padding(innerPadding)){com.gaofeng.comps.Conversation(SampleData.conversationSample)}}}}}}

最后实现效果