Создание цепочек компонентов

Цепочки или chains позволяют применить набор ограничений к группе компонентов и таким образом построить из них цепочку. Для этого применяются методы createHorizontalChain() или createVerticalChain(), в которые передаются ссылки на компоненты. Например, следующий код создает горизонтальную цепочку между тремя компонентами Box:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent{
            ConstraintLayout(Modifier.fillMaxSize()) {
                val (box1, box2, box3) = createRefs()
                createHorizontalChain(box1, box2, box3)
                Box(Modifier.size(120.dp).background(Color.DarkGray).constrainAs(box1) {
                    centerVerticallyTo(parent)
                })
                Box(Modifier.size(120.dp).background(Color.Red).constrainAs(box2) {
                    centerVerticallyTo(parent)
                })
                Box(Modifier.size(120.dp).background(Color.Blue).constrainAs(box3) {
                    centerVerticallyTo(parent)
                })
            }
        }
    }
}

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

• ChainStyle.Spread: пространство распределяется равномерно по всем компонентам, включая свободное пространство до первого компонента и после последнего компонента.

• ChainStyle.SpreadInside: пространство распределяется равномерно по всем компонентам, без какого-либо свободного места перед первым компонентом или после последнего компонента.

• ChainStyle.Packed: пространство распределяется до первого и после последнего компонента, компоненты упаковываются вместе без промежутков между собой.

Например, применим последний второй стиль:

import androidx.constraintlayout.compose.ChainStyle
............................................
ConstraintLayout(Modifier.fillMaxSize()) {
    val (box1, box2, box3) = createRefs()
    createHorizontalChain(box1, box2, box3, chainStyle = ChainStyle.SpreadInside)
    Box(Modifier.size(120.dp).background(Color.DarkGray).constrainAs(box1) {
        centerVerticallyTo(parent)
    })
    Box(Modifier.size(120.dp).background(Color.Red).constrainAs(box2) {
        centerVerticallyTo(parent)
    })
    Box(Modifier.size(120.dp).background(Color.Blue).constrainAs(box3) {
        centerVerticallyTo(parent)
    })
}