implementation "androidx.compose.ui:ui-viewbinding:$compose_version"
AndroidViewBinding(
factory = ListItemBinding::inflate,
update = {
...
},
modifier = ...,
)
AndroidViewBinding(
factory = { inflater, parent, attachToParent ->
ListItemBinding.inflate(inflater, parent, attachToParent).apply {
...
}
},
update = {
...
},
modifier = ...,
)
val state = rememberLazyListState()
// TODO derivedStateOf を使う
val showScrollToTopButton= state.firstVisibleItemIndex > 0
LazyColumn(
state = state,
modifier = Modifier.fillMaxSize()
) {
...
}
if (showScrollToTopButton) {
Button(
onClick = {
...
},
...
) {
Text("scroll to top")
}
}
val showScrollToTopButton by remember {
derivedStateOf { state.firstVisibleItemIndex > 0 }
}
に変えると、スクロールのたびに recompose が走っていたのがなくなり、Button の skip count が増えなくなりました。
@OptIn(ExperimentalMaterialNavigationApi::class)
@Composable
fun MyApp() {
val bottomSheetNavigator = rememberBottomSheetNavigator()
val navController = rememberNavController(bottomSheetNavigator)
ModalBottomSheetLayout(bottomSheetNavigator) {
MyNavHost(navController)
}
}
@OptIn(ExperimentalMaterialNavigationApi::class)
@Composable
fun MyNavHost(navController: NavHostController) {
NavHost(
navController = navController,
startDestination = "home"
) {
composable(route = "home") {
Button(onClick = {
navController.navigate("sheet")
}) {
Text("show bottom sheet")
}
}
bottomSheet(route = "sheet") {
Box(
contentAlignment = Alignment.Center,
modifier = Modifier.fillMaxSize()
) {
Spacer(
modifier = Modifier
.size(100.dp)
.background(Color.Blue)
)
}
}
}
}
この場合、Blue の四角は Bottom Sheet を完全に展開したときの中心に配置されます。
@OptIn(ExperimentalMaterialNavigationApi::class)
@Composable
fun MyNavHost(navController: NavHostController) {
NavHost(
navController = navController,
startDestination = "home"
) {
composable(route = "home") {
Button(onClick = {
navController.navigate("sheet")
}) {
Text("show bottom sheet")
}
}
bottomSheet(route = "sheet") {
val bottomSheetNavigator = navController.navigatorProvider[BottomSheetNavigator::class]
val offset = bottomSheetNavigator.navigatorSheetState.offset.value
Column {
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.fillMaxWidth()
.weight(1f)
) {
Spacer(
modifier = Modifier
.size(100.dp)
.background(Color.Blue)
)
}
with(LocalDensity.current) {
Spacer(modifier = Modifier.height(offset.toDp()))
}
}
}
}
}
投稿
すべてのコメント
