Compose Text 与icon拼接 实现DrawableLeft 或者DrawableRIght

Posted 2022-07-18 安果移不动

 这个我们想拼接到一起 而不是用一个Row 写两个空间

想用一个text

原生android DrawableStart or DrawableEnd就可以解决

Compose呢

官网 搜索 inlineTextContent

InlineTextContent  |  Android Developers

详细实例如下

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.text.BasicText
import androidx.compose.foundation.text.InlineTextContent
import androidx.compose.foundation.text.appendInlineContent
import androidx.compose.ui.text.Placeholder
import androidx.compose.ui.text.buildAnnotatedString

val myId = "inlineContent"
val text = buildAnnotatedString 
    append("Hello")
    // Append a placeholder string "[myBox]" and attach an annotation "inlineContent" on it.
    appendInlineContent(myId, "[myBox]")


val inlineContent = mapOf(
    Pair(
        // This tells the [BasicText] to replace the placeholder string "[myBox]" by
        // the composable given in the [InlineTextContent] object.
        myId,
        InlineTextContent(
            // Placeholder tells text layout the expected size and vertical alignment of
            // children composable.
            Placeholder(
                width = 0.5.em,
                height = 0.5.em,
                placeholderVerticalAlign = PlaceholderVerticalAlign.AboveBaseline
            )
        ) 
            // This [Box] will fill maximum size, which is specified by the [Placeholder]
            // above. Notice the width and height in [Placeholder] are specified in TextUnit,
            // and are converted into pixel by text layout.
            Box(modifier = Modifier.fillMaxSize().background(color = Color.Red))
        
    )
)

BasicText(text = text, inlineContent = inlineContent)

 我们就不用他的了 直接上我们的代码

package com.anguomob.compose.ui.components

import android.util.Log
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.text.InlineTextContent
import androidx.compose.foundation.text.appendInlineContent
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.HelpOutline
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.Placeholder
import androidx.compose.ui.text.PlaceholderVerticalAlign
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun DailyTaskContent() 
    DailyTaskItem("登录", "5积分/每次首日登录", "已获得50积分/每日上限100积分", 1f)
    DailyTaskItem("文章学习", "10积分/每有效阅读1篇文章", "已获50积分/每日上线100积分", 0.7f)


private const val TAG = "DailyTaskContent"

@Composable
fun DailyTaskItem(title: String, secondayTitle: String, desc: String, percent: Float) 
    val inlineContentId = "inlineContentId"
    val secondayText = buildAnnotatedString 
        append(secondayTitle)
        appendInlineContent(inlineContentId, "[icon]")
    

    val inlineContent = mapOf(
        Pair(inlineContentId,
            InlineTextContent(Placeholder(width = 14.sp,
                height = 14.sp,
                placeholderVerticalAlign = PlaceholderVerticalAlign.AboveBaseline))  str ->
                when (str) 
                    "[icon]" -> Icon(imageVector = Icons.Default.HelpOutline,
                        contentDescription = null)
                

            )
    )
    Row(modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically) 
        Column(modifier = Modifier.weight(7.5f)) 
            Text(text = title, fontSize = 16.sp, color = Color(0xff333333))

            Text(text = secondayText,
                inlineContent = inlineContent,
                fontSize = 14.sp,
                color = Color(0xff333333),
                modifier = Modifier.clickable  Log.e(TAG, ":click "); 
            )

            Row(
                verticalAlignment = Alignment.CenterVertically,
            ) 
                LinearProgressIndicator(progress = percent, modifier = Modifier.weight(1f))
                Text(text = desc,
                    fontSize = 10.sp,
                    color = Color(0xff333333),
                    modifier = Modifier
                        .weight(2f, fill = false)
                        .padding(8.dp))
            

        

        OutlinedButton(onClick =  ,
            border = if (percent >= 1f) ButtonDefaults.outlinedBorder else BorderStroke(1.dp,
                Color(0xffff5900)),
            shape = CircleShape,
            colors = if (percent >= 1f) ButtonDefaults.outlinedButtonColors(
                contentColor = Color(0xffff5900)
            ) else 
                ButtonDefaults.outlinedButtonColors(
                    contentColor = Color(0xffff5900)
                )
            ,
            modifier = Modifier
                .weight(2.5f),
            enabled = (percent < 1f)
        ) 
            Text(text = "去学习")

        
    

 第一步创建id 后续给Text用

第二部创建AnnotatedString 拼接原先字符串

与Icon代表的字符串

第三部

构建核心参数

其width 与height为 Icon的大小

    val inlineContent = mapOf(
        Pair(inlineContentId,
            InlineTextContent(Placeholder(width = 14.sp,
                height = 14.sp,
                placeholderVerticalAlign = PlaceholderVerticalAlign.AboveBaseline))  str ->
                when (str) 
                    "[icon]" -> Icon(imageVector = Icons.Default.HelpOutline,
                        contentDescription = null)
                

            )
    )

第四步使用

         Text(text = secondayText,
                inlineContent = inlineContent,
                fontSize = 14.sp,
                color = Color(0xff333333),
                modifier = Modifier.clickable  Log.e(TAG, ":click "); 
            )

设计起来更为复杂，也同时更为可定制度更高。