Функция BadgedBox

Функция BadgedBox рисует основной элемент и метку в углу. Метку передают в лямбду badge, обычно через Badge. Иконку или текст - в лямбду content. Так оформляют непрочитанные сообщения на иконке в панели.

Синтаксис

BadgedBox(
	badge = { Badge { Text("3") } },
) {
	Icon(...)
}

Параметры

Параметр	Описание
`badge`	Лямбда с меткой. Чаще всего вызывают `Badge` с цифрой или точкой.
`content`	Лямбда с основным элементом под меткой, например иконкой или аватаром.

Пример

Давайте повесим метку на иконку:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Mail
import androidx.compose.material3.BadgedBox
import androidx.compose.material3.Badge
import androidx.compose.material3.Icon
import androidx.compose.material3.Text

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			BadgedBox(
				badge = {
					Badge {
						Text(text = "3")
					}
				},
			) {
				Icon(
					imageVector = Icons.Filled.Mail,
					contentDescription = "abcde",
				)
			}
		}
	}
}

На экране у иконки конверта в углу будет метка с цифрой 3.

Пример

Давайте покажем точку без числа:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Notifications
import androidx.compose.material3.BadgedBox
import androidx.compose.material3.Badge
import androidx.compose.material3.Icon

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			BadgedBox(
				badge = { Badge() },
			) {
				Icon(
					imageVector = Icons.Filled.Notifications,
					contentDescription = "12345",
				)
			}
		}
	}
}

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

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

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