Jetpack Составьте вырезку детей столбца в ряд

Question

Здесь справа у меня есть список элементов в компонуемом виде, каждый элемент находится внутри строки, все элементы находятся внутри столбца, а этот столбец находится внутри строки

Проблема в том, что когда эта строка / столбец / составной элемент достигает конца экрана, все дочерние элементы обрезаются, чтобы соответствовать экрану, который мне не нужен , я хочу, чтобы эти элементы отображались полностью, даже если за пределами экрана, поскольку у меня есть масштабируемый контейнер над ними, который позволил бы мне панорамировать компонуемое внутри

Как видите, текст в текстовом поле расположен в одну строку по вертикали, а не расширяет ширину. Это проблема.

Код:

      @Composable
fun SimpleNodesList(
    modifier: Modifier = Modifier,
    parentNode: MapNode,
    nodes: List<MapNode>,
    renderLeft: Boolean = true,
    renderRight: Boolean = true,
    isRtl: Boolean = false
) {
    Column(
        modifier = modifier,
        horizontalAlignment = if (isRtl) Alignment.End else Alignment.Start,
    ) {
        nodes.forEach { node ->
            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.Center,
            ) {
                //Rendering Left Tree
                if (renderLeft && node.left.isNotEmpty()) {
                    SimpleNodesList(
                        modifier = modifier,
                        parentNode = node,
                        nodes = node.left,
                        renderRight = renderRight,
                        isRtl = true
                    )
                }

                //Rendering Node Itself
                SimpleNode(parentNode = parentNode, node = node, isRtl = isRtl)

                //Rendering Right Tree
                if (renderRight && node.right.isNotEmpty()) {
                    SimpleNodesList(
                        modifier = modifier,
                        parentNode = node,
                        nodes = node.right,
                        renderLeft = renderLeft
                    )
                }
            }
        }
    }
}

У каждого узла есть левое дерево и правое дерево, я использую рекурсивные составные элементы для рендеринга их узлов.

На данный момент рендерится только один узел

Что это

      @Composable
fun MapTextNode(modifier: Modifier = Modifier, node: TextNode, isRtl: Boolean) {

    val state = LocalMapper.current
    if (state.editingNode == node) {


        val focusRequester = remember(node) { FocusRequester() }

        OutlinedTextField(
            modifier = modifier
                .widthIn(min = 60.dp)
                .focusRequester(focusRequester = focusRequester),
            value = node.text,
            onValueChange = {
                node.text = it
            },
            colors = TextFieldDefaults.outlinedTextFieldColors(
                focusedBorderColor = Color.Transparent,
                unfocusedBorderColor = Color.Transparent
            ),
            textStyle = TextStyle(
                textAlign = if (isRtl) TextAlign.Right else TextAlign.Start
            ),
        )

        LaunchedEffect(key1 = null, block = {
            focusRequester.requestFocus()
        })
    } else {
        Text(
            modifier = modifier
                .clickable {
                    state.activeNode = node
                    state.editingNode = null
                }
                .widthIn(min = 60.dp)
                .background(
                    color = if (node.backgroundColor == Color.Transparent)
                        MaterialTheme.colors.onBackground.copy(.2f)
                    else node.backgroundColor,
                    shape = MaterialTheme.shapes.medium
                )
                .border(
                    width = if (state.activeNode == node) 2.dp else 0.dp,
                    color = if (node.backgroundColor == Color.Transparent)
                        MaterialTheme.colors.onBackground.copy(.4f)
                    else node.backgroundColor,
                    shape = MaterialTheme.shapes.medium
                )
                .padding(8.dp),
            text = node.text,
            softWrap = false
        )
    }

    LaunchedEffect(key1 = null, block = {
        state.editingNode = node
    })
}

Answer 1

Использование этого модификатора выполняет работу для строки. В моем случае мне также понадобился этот модификатор макета, работал, но дети по какой-то причине не могли щелкнуть мышью за пределами контейнера масштабирования!

Мне также пришлось создать модификатор с возможностью масштабирования, а не с помощью масштабируемого блока, поэтому события касания с масштабированием будут отправляться на этот составной объект, а не на родительский объект!

      modifier = Modifier
        .layout { measurable, constraints ->
            val r =
                measurable.measure(constraints = constraints.copy(maxWidth = Constraints.Infinity))
            layout(r.measuredWidth, r.measuredHeight, placementBlock = {
                r.placeWithLayer(0, 0, 0f) {

                }
            })
        }
        .wrapContentSize(unbounded = true)

Answer 2

Если вы используете жестко заданную ширину текста, применяя на каждом контейнере может сработать

Answer 3

Используйте SimpleFlowRow вместо Row. Это решит проблему обрезки.