Row

Контейнер Row располагает вложенные компоненты в строку. Функция Row принимает четыре параметра:

@Composable
inline fun Row(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    content: @Composable RowScope.() -> Unit
): @Composable Unit

• modifier: объект Modifier, который позволяет настроить внешний вид и поведение компонента

• horizontalArrangement: объект Arrangement.Horizontal, который устанавливает выравнивание компонента по горизонтали. По умолчанию имеет значение Arrangement.Start (расположение в вначале: слева для левосторонних языков и справа для правосторонних языков)

• verticalAlignment: объект Alignment.Vertical, который устанавливает выравнивание компонента по вертикали. По умолчанию имеет значение Alignment.Top (расположение вверху)

• content: объект интерфейса RowScope, который представляет вложенное содержимое

Разместим в Row несколько элементов 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.Row
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Row {
                Box(modifier = Modifier.background(Color.Red).height(150.dp).width(100.dp))
                Box(modifier = Modifier.background(Color.DarkGray).height(150.dp).width(100.dp))
                Box(modifier = Modifier.background(Color.Blue).height(150.dp).width(100.dp))
            }
        }
    }
}

Установка размеров Row

Если ни у одного вложенного компонента НЕ указан вес, Row занимает то пространство, которое необходимо, чтобы вместить вложенные компоненты. Если подобный размер контейера не желателен, то можно задать конкретный размер с помощью модификатора Modifier.width:

Row(modifier = Modifier.width(350.dp))

С помощью модификатора Modifier.fillMaxWidth можно растянуть контейер по всей длине экрана.

Row(modifier = Modifier.fillMaxWidth())

Если как минимум для одного вложенного компонента указан вес, то в модификаторе Modifier.fillMaxWidth нет смысла. Однако в этот случае по прежнему можно использовать модификаторы Modifier.width и Modifier.size для ограничения ширины контейера.

Позиционирование по горизонтали и horizontalArrangement

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

• Arrangement.Center: расположение по центру

• Arrangement.End: расположение в конце (справа - для левосторонних языков, слева - для правосторонних языков)

• Arrangement.Start: расположение в начале (слева - для левосторонних языков, справа - для правосторонних языков)

• Arrangement.SpaceAround: компоненты равномерно распределяются по всей ширине с равномерными отступами между элементами, при этом отступы между первым и последним элементами и границами контейнера равен половине отступов между элементами

• Arrangement.SpaceBetween: компоненты равномерно распределяются по всей ширине с равномерными отступами между элементами, при этом первый и последний элементы прижимаются к границам контейнера

• Arrangement.SpaceEvenly: компоненты равномерно распределяются по всей ширине с равномерными отступами между элементами, при этом отступы между первым и последним элементами и границами контейнера равны отступам между элементами

Например:

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.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly)
            {
                Box(modifier = Modifier.background(Color.Red).height(150.dp).width(100.dp))
                Box(modifier = Modifier.background(Color.DarkGray).height(150.dp).width(100.dp))
                Box(modifier = Modifier.background(Color.Blue).height(150.dp).width(100.dp))
            }
        }
    }
}

Выравнивание по вертикали

Параметр verticalAlignment в Row позволяет установить выравнивание по вертикали для вложенных компонентов и принимает объект интерфейса Alignment.Vertical. В частности, мы можем использовать одно из следующих значений:

• Top: выравнивание по верху

• CenterVertically: выравнивание по центру

• Bottom: выравнивание по нижнему краию контейнера

Например, применим выравнивание по центру строки:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.sp


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Row(modifier = Modifier.fillMaxSize(),
                horizontalArrangement = Arrangement.SpaceEvenly,
                verticalAlignment = Alignment.CenterVertically)
            {
                Text("Kotlin", fontSize = 28.sp)
                Text("JavaScript", fontSize = 28.sp)
                Text("Python", fontSize = 28.sp)
            }
        }
    }
}

Модификаторы RowScope

Поскольку вложенные компоненты в Row определяются внутри RowScope, то RowScope предоставляет вложенным компонентам еще ряд модификаторов:

• align(): определяет выравнивание компонента по вертикали и может принимать значения:

  • Alignement.Top: выравнивание по верху контейнера

  • Alignement.CenterVertically: выравнивание по центру

  • Alignement.Bottom: выравнивание по нижней стороне контейнера

• alignBy(): выравнивает компонент относительно определенной горизонтальной линии

• alignByBaseline(): выравнивает базовую линию компонента относительно базовой линии другого сестринского компонента, применяется для выравнивания текста компонентов по одной линии

• paddingFrom(): добавляет отступ при выравнивании

• weight(): задает вес компонента

Например, установка вертикального выравнивания для каждого компонента по отдельности с помощью модификатора align:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.sp


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Row(modifier = Modifier.fillMaxSize(),
                horizontalArrangement = Arrangement.SpaceEvenly)
            {
                Text("Top", fontSize = 28.sp, modifier = Modifier.align(Alignment.Top))
                Text("CenterVertically", fontSize = 28.sp, modifier = Modifier.align(Alignment.CenterVertically))
                Text("Bottom", fontSize = 28.sp, modifier = Modifier.align(Alignment.Bottom))
            }
        }
    }
}

Установка веса компонентов

Вес (weight) позволяет назначить вложенным компонентам ширину в соответствии с некоторым коэффициентом. Для указания веса применяется модификатор RowScope.weight. Стоит учитывать, что если контейнер Row обеспечивает горизонтальную прокрутку или располагается в контейере, который предполагает горизонтальную прокрутку, то веса компонентов игнорируются, поскольку общее пространство по горизонтали условно бесконечно.

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.Row
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Row{
                Box(modifier = Modifier.background(Color.Red).height(150.dp).weight(1f))
                Box(modifier = Modifier.background(Color.DarkGray).height(150.dp).weight(3f))
                Box(modifier = Modifier.background(Color.Blue).height(150.dp).weight(2f))
            }
        }
    }
}

Обратите внимание, как передается вес:

Box(modifier = Modifier.background(Color.Red).height(150.dp).weight(1f))

В качестве веса в функцию weight() фактически передается доля пространства в единицах f. Так, первый элемент Box имеет вес 1f, второй - 3f, третий - 2f. Соовокупный вес всех комонентов, таким образом, будет 1f + 3f + 2f = 6f. И в итоге получится, что первый элемент получит от пространства 1f/6f часть или одну шестую. Второй элемент - 3f/6f или половину простанства, а третий - 2f/6f или одну третью пространства по горизонтали. Таким образом будет распределено пространство по горизонтали между вложенными элементами.

Сочетание весов и точных размеров

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

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.Row
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Row{
                Box(modifier = Modifier.background(Color.Red).height(150.dp).weight(1f))
                Box(modifier = Modifier.background(Color.DarkGray).height(150.dp).width(150.dp))
                Box(modifier = Modifier.background(Color.Blue).height(150.dp).weight(2f))
            }
        }
    }
}

Здесь для второго элемента Box установлена ширина в 150 единиц, а для остальных установлены веса - 1f и 2f. Таким образом, получится, что от всей ширины контейера Row (а он будет растягиваться на весь экран) второй элемент получит ширину в 150 единиц. Оставшееся пространство затем будет распределено между первым и третим элементами в соответствии с их весами.