Функция Badge

Функция Badge рисует компактную метку Material3 поверх другого элемента или отдельно. Текст или точку передают в лямбду content, часто через Text. Чтобы привязать метку к иконке, удобнее обёртка BadgedBox.

Синтаксис

Badge {
	Text("5")
}

Параметры

Параметр	Описание
`content`	Лямбда с текстом метки. Если лямбду не передать, рисуется маленькая точка без цифры.
`containerColor`	Цвет фона метки.

Пример

Давайте выведем метку с цифрой:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Badge
import androidx.compose.material3.Text

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			Badge {
				Text(text = "5")
			}
		}
	}
}

На экране появится круглая метка с цифрой 5.

Пример

Давайте нарисуем метку-точку без текста:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Badge

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			Badge()
		}
	}
}

На экране будет маленькая цветная точка без подписи.

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

функция BadgedBox,
которая кладёт Badge на иконку
функция NavigationBar,
где часто показывают счётчик на вкладке
функция Text,
которой пишут цифру внутри метки
функция IconButton,
рядом с которой ставят Badge