Как удалить отступы Surface в джетпаке

В LazyColumn, когда мы используем LazyListScope.items с Surface. Внутри нескольких элементов есть дополнительные отступы сверху и снизу. Я хочу удалить эту прокладку. Я использую компонент Surface Материала 3. Версия спецификации compose_bom = "2022.11.00".

Пожалуйста, не предлагайте никаких исправлений альфа или бета версии. Если стабильный API Материала 3 не имеет решения, то, пожалуйста, предложите нормальный поверхностный материал.

Предварительный просмотрCreateListView

@Preview(showBackground = true)
@Composable
fun PreviewCreateListView() {
    CreateListView()
}

CreateListView

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CreateListView() {
    val itemList = listOf(1, 2, 3)
    LazyColumn(
        contentPadding = PaddingValues(16.dp),
    ) {
        items(itemList) { item ->
            Surface(
                onClick = { },
                color = Color.Blue
            ) {
                Text(
                    modifier = Modifier.fillMaxWidth(),
                    text = "$item",
                )
            }
        }
    }
}

Выход

0
0
58
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вариант Surface, который вы используете, с параметром onClick обеспечивает минимальную высоту в целях доступности, см. это в строке 221.

Если вы хотите удалить пробел, используйте вариант без аргумента onClick и вместо него используйте Modifier.clickable

@Composable
fun CreateListView() {
    val itemList = listOf(1, 2, 3)
    LazyColumn(
        contentPadding = PaddingValues(16.dp),
    ) {
        items(itemList) { item ->
            Surface(
                modifier = Modifier.clickable {  },
                color = Color.Blue
            ) {
                Text(
                    modifier = Modifier.fillMaxWidth(),
                    text = "$item",
                )
            }
        }
    }
}

Ответ принят как подходящий

M3 Surface с параметром onClick имеет минимальный размер цели касания (48.dp) для доступности. Он будет включать дополнительное пространство за пределами компонента, чтобы обеспечить их доступность.

Вы можете переопределить это поведение, применяя false к LocalMinimumInteractiveComponentEnforcement. Если установлено значение false, лишнего места не будет.

Что-то вроде:

CompositionLocalProvider(
    LocalMinimumInteractiveComponentEnforcement provides false) {
    
    Surface(
        onClick = { },
        color = Color.Blue
    ) {
        Text(
            modifier = Modifier.fillMaxWidth(),
            text = "$item",
        )
    }
}

Примечание: LocalMinimumInteractiveComponentEnforcement требуется не менее М2 1.4.0-alpha04 и М3 1.1.0-alpha04. Прежде чем вы сможете использовать LocalMinimumTouchTargetEnforcement таким же образом.

Unresolved reference: LocalMinimumInteractiveComponentEnforcement получение ошибки.
Vivek Modi 09.02.2023 00:24

@VivekModi Плохо. Со стабильной версией M3 1.0.1 вы должны использовать LocalMinimumTouchTargetEnforcement. Начиная с M3 1.1.0 он был изменен на LocalMinimumInteractiveComponentEnforcement

Gabriele Mariotti 09.02.2023 07:40

Другие вопросы по теме