Класс RoundedCornerShape

Класс RoundedCornerShape реализует Shape прямоугольником со скруглёнными углами. Радиус задают в Dp одним числом для всех углов или отдельными значениями для каждого угла. Форму передают в background, clip и border.

Синтаксис

RoundedCornerShape(12.dp)

Пример

Давайте зальём плашку со скруглением 12 dp:

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.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
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 {
			Text(
				text = "abcde",
				modifier = Modifier
					.background(
						color = Color.LightGray,
						shape = RoundedCornerShape(12.dp),
					)
					.padding(16.dp),
			)
		}
	}
}

На экране текст окажется на серой плашке со скруглёнными углами.

Пример

Давайте зададим разный радиус для верхних и нижних углов:

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.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
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 {
			val shape = RoundedCornerShape(
				topStart = 24.dp,
				topEnd = 24.dp,
				bottomStart = 4.dp,
				bottomEnd = 4.dp,
			)
			Box(
				modifier = Modifier
					.size(width = 140.dp, height = 80.dp)
					.background(Color.Blue, shape = shape),
			) {
				Text(text = "12345")
			}
		}
	}
}

На экране верх блока будет сильнее скруглён, низ останется почти прямым.

Смотрите также

класс CutCornerShape,
форма со срезанными углами
класс Shape,
общий тип контура
метод background,
заливка по форме
метод border,
обводка по той же форме