Compose text and icon splicing to realize drawableleft or drawableright

  We want to splice this together Instead of using a Row Write two spaces

I want to use one text

Native android DrawableStart or DrawableEnd You can solve it

Compose Well

Official website Search for  inlineTextContent

InlineTextContent  |  Android Developers

Detailed examples are as follows

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)

  We won't use him Go directly to our code

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(" Sign in ", "5 integral / Log in on the first day of each time ", " Have obtained 50 integral / Daily limit 100 integral ", 1f)
    DailyTaskItem(" Article learning ", "10 integral / Every effective reading 1 An article ", " Obtained 50 integral / Online every day 100 integral ", 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 = " To learn ")

        }
    }
}

  The first step is to create id Follow up Text use

The second part creates AnnotatedString Splice the original string

And Icon Represents a string of

Third parts

Build core parameters

Its width And height by Icon Size

    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)
                }

            })
    )

Step 4 use

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

Design is more complex , At the same time, the system is higher .