Использование нижнего листа Jetpack Compose для создания нижнего листа экрана профиля Snapchat ⇐ Android

[Anonymous]

Я создаю экран профиля, похожий на экран профиля Snapchat, который включает фоновое изображение профиля и нижний лист, отображающий имя и другие сведения. Я реализовал экран и нижний лист двумя разными способами. Вот фрагменты кода:

• Использование ModalBottomSheet:

Код: Выделить всё

@Composable
fun UserScreen() {
val modalBottomSheet = remember { mutableStateOf(false) }

Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Top,
horizontalAlignment = Alignment.CenterHorizontally
) {
UserImageView()

}

BottomSheet(modalBottomSheet)

}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BottomSheet(showModalBottomSheet: MutableState\) {
rememberCoroutineScope()

ModalBottomSheet(
onDismissRequest = { showModalBottomSheet.value = true }
) {
HeadingTextComponent(value = stringResource(id = R.string.username))
Spacer(modifier = Modifier.height(10.dp))
CardComponent()

LazyColumn(Modifier.fillMaxSize()) {
items(50) { index ->
Text(
text = "Item $index",
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
)
}
}
}

}

Вывод ModalBottomSheet
Однако у этого подхода была одна проблема: смахивание нижнего листа вниз сводило его к минимуму, что нежелательно. Итак, я изучил другой подход:

• Использование BottomSheetScaffold:

Код: Выделить всё

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun UserScreen() {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Top,
horizontalAlignment = Alignment.CenterHorizontally
) {
MyBottomSheet()
}
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyBottomSheet() {
BottomSheetScaffold(
sheetContent = {
HeadingTextComponent(value = stringResource(id = R.string.username))
LazyColumn(
modifier = Modifier.fillMaxSize()
) {
items(50) { index -\>
Text(
text = "Item $index",
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
)
}
}
},
sheetPeekHeight = 600.dp
) {

UserImageView()

}

}

Вывод BottomSheetScaffold
Я ценю этот подход, поскольку он позволяет мне установить для листаPeekHeight значение 600.dp, предотвращая его свертывание. Однако есть несколько проблем, которые необходимо решить:

• Когда нижний лист полностью развернут, закругленные углы все еще видны.< /p>
• Нижний лист не перекрывает панель уведомлений, в результате чего отображается значок нижнего листа и закругленные углы.
• Кроме того, когда лист полностью раскрыт и вы с силой проводите по нему, лист временно отсоединяется. Эта проблема возникает в обоих наборах кодов.

Желаемое поведение:

• Нижний лист должен иметь определенную начальную высоту.
• Лист не должен сворачиваться при нажатии на значок прокрутите экран или проведите пальцем вниз.
• Закругленные углы не должны быть видны, когда лист полностью раскрыт.
  < /li>
  Вместо привязки к панели уведомлений лист должен иметь эффект плавного перетаскивания. Вы можете обратиться к нижнему листу Snapchat, чтобы лучше понять, что я имею в виду.

Я приложил несколько снимков экрана для вашего ссылка.
P.S. - Я новичок в Kotlin и Jetpack Compose и потратил много времени, пытаясь решить эту проблему. Поэтому, пожалуйста, поддержите меня и окажите соответствующую помощь.

Подробнее здесь: https://stackoverflow.com/questions/765 ... creen-bott