0

Here is the code:


@Composable
fun MainScreen() {

    var textState by remember { mutableStateOf("") }
    val onTextChange = { text : String ->
        textState = text
    }
    Column(Modifier.width(200.dp).padding(5.dp)) {
        Column(modifier = Modifier.width(intrinsicSize = IntrinsicSize.Min)) {
            Text(
                modifier = Modifier
                    .padding(start = 4.dp),
                text = textState
            )
            Box(Modifier.height(10.dp).fillMaxWidth().background(Color.Blue))
        }
        MyTextField(text = textState, onTextChange = onTextChange)
    }

}


@Composable
fun MyTextField(text: String, onTextChange : (String) -> Unit) {
    TextField(
        value = text,
        onValueChange = onTextChange
    )
}

When I enter this line of text: This is

It appears in the Text composable like this:


    This 
    is

To me, it looks as if each time I hit the space bar to start a new word, I have just created a new Text object. I guess the code works like this: The first letter is "T", what is the min value? It takes one character: 1.dp. Ok, recompose the Text composable and so on .. until I hit the space bar. At this time the word This is treated as a whole new Text because when I enter is, this word is on a new line. In short, it looks like I have changed the code to :

 Text("This")
 Text("is")

My question is

  1. Is the 'Text' composable treated as a special case as the instrinsic measurements apply to the words it contains?
  2. Is the space bar a magic device to "create" Text composables?

Thank you for reading.

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
ntos
  • 189
  • 10

1 Answers1

0

In your case you should use IntrinsicSize.Max

Column(
    modifier = Modifier.width(intrinsicSize = IntrinsicSize.Max)
) {
    Text()
    Box(Modifier.fillMaxWidth())
}

enter image description here

Using IntrinsicSize.Min in your code the internal MinIntrinsicWidthModifier calculates child's minIntrinsicWidth = the minimum width that the layout can be such that the content of the layout will be painted correctly, and it means having the width = longest word width in the Text.

enter image description here

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
  • That is because I am learning Compose and the book is teaching this value. And I want to know why it works this way. – ntos Feb 25 '23 at 10:18
  • Quite complex to explain in an answer. `MinIntrinsicWidthModifier` calculates child's minIntrinsicWidth = the minimum width that the layout can be such that the content of the layout will be painted correctly, then uses that `minIntrinsicWidth` to crate a fixed width `Constraints` to measure child. – Gabriele Mariotti Feb 25 '23 at 10:30
  • It means that using `IntrinsicSize.Min` the minimum width = longest word width. – Gabriele Mariotti Feb 25 '23 at 10:34
  • Yes, I understand that. It is only that I have no idea how `Column` knows to put `This` and `is` on two separate lines but when you enter a sentence like ` This is an example.` , and `This is` is now on the same line. I know how to write a custom layout but looking at the code for `Column` , I am at a complete loss. – ntos Feb 25 '23 at 11:56
  • @ntos It is not clear what it is expected result. – Gabriele Mariotti Feb 25 '23 at 18:58