Surface

Компонент Surface является ключевым компонентом компоновки в Material Design, предоставляя для вложенного содердимого множество стилизаций по умолчанию. Он имеет несколько версий. Возьмем простейшую из них:

@Composable
@NonRestartableComposable
fun Surface(
    modifier: Modifier = Modifier,
    shape: Shape = RectangleShape,
    color: Color = MaterialTheme.colorScheme.surface,
    contentColor: Color = contentColorFor(color),
    tonalElevation: Dp = 0.dp,
    shadowElevation: Dp = 0.dp,
    border: BorderStroke? = null,
    content: @Composable () -> Unit
): Unit

Данная версия функции компонента принимает следующие параметры:

• modifier: применяемые к контейнеру функции модификатора

• shape: форма компонента в виде объекта Shape

• color: фоновый цвет

• contentColor: предпочитаемый цвет содержимого

• tonalElevation: эффект анимации при нажатии

• shadowElevation: высота тени

• border: параметры границы в виде объекта BorderStroke

Например, простейший SUrface:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Surface(
                Modifier.fillMaxSize(),
                contentColor = Color.LightGray,
                color = Color.DarkGray
            ){
                Text("Hello METANIT.COM", fontSize = 28.sp)
            }
        }
    }
}

В данном случае мы видим, что текст в качестве цвета использовал настройки Surface.

При этом Surface может одновременно содержать только один компонент, поэтому при использовании множества компонентов, их следует оборачивать в другой контейнер типа Box, Row или Column:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val langs = listOf("Kotlin", "Java", "JavaScript", "Python")
            Surface(
                Modifier.fillMaxSize(),
                contentColor = Color.LightGray,
                color = Color.DarkGray
            ){
                Column {
                    Text("Языки программирования", fontSize = 28.sp)
                    for(lang in langs){
                        Text(lang, fontSize = 22.sp)
                    }
                }
            }
        }
    }
}