【compose】仿电池样式进度条

项目场景实现如图所示仿电池样式的进度条实现方案/** * 自定义进度条图片背景、颜色变换、文字显示 * * param progress:进度 * param fontSize:文字大小 * param modifier:修饰符 * */ComposablefunProgressBarWithBackground(progress:Int,fontSize:Int8,modifier:ModifierModifier){// 进度颜色valfillColorwhen{progress30-Color(0xFFFFC5C4)progress70-Color(0xFFB5DAFF)else-Color(0xFFBFFFCA)}//文字颜色valtextColorwhen{progress30-Color(0xFFF7211E)progress70-Color(0xFF3098FF)else-Color(0xFF0AC429)}//背景图valbackgroundPainterwhen{progress30-painterResource(R.mipmap.ic_heart_red)progress70-painterResource(R.mipmap.ic_heart_blue)else-painterResource(R.mipmap.ic_heart_green)}// 外层Box设置背景图片 边框 圆角Box(modifiermodifier.fillMaxSize(),contentAlignmentAlignment.CenterStart){//底层背景图Image(painterbackgroundPainter,contentDescription背景,contentScaleContentScale.Crop,modifierModifier.fillMaxSize())// 内层进度填充Box(modifierModifier.fillMaxWidth(progress.coerceIn(0,100)/100f).fillMaxHeight().padding(2.dp,1.dp).background(colorfillColor,shapeRoundedCornerShape(4.dp)))Text(text${progress}%,colortextColor,fontSizefontSize.sp,lineHeightfontSize.sp,modifierModifier.padding(end4.dp).align(Alignment.CenterEnd))}}可能遇到的问题文字未能垂直居中当 Text 的 lineHeight 属性未设置时可能会遇到该问题