mi pregunta
He estado escribiendo MVI por un tiempo. Recientemente, encontré una navegación que era un poco fuera de lo común y estaba confundido. El efecto específico se puede ver en la siguiente imagen: A primera vista, esta interfaz de usuario es simple. ¿No es sólo
una fila que contiene una TabRow y una imagen? ¿No es suficiente? Después de una implementación específica, se puede encontrar que el ancho del elemento de TabRow se distribuye uniformemente utilizando el más largo de forma predeterminada, lo que provocará los siguientes problemas:
Mi optimización
Lo primero que pensé fue en resolver el problema personalizando la Vista. Pensé en la necesidad de lidiar con la asociación deslizante de la página. Navegué por los siguientes sitios web oficiales y descubrí que TopAppBar se veía bastante similar. Al final, Copié directamente una copia y la modifiqué ligeramente de la siguiente manera para resolver el problema (por supuesto, puede personalizar la Vista usted mismo). Lo mismo ocurre con la configuración de asociaciones).
TopAppBar(
modifier = Modifier
.height(ConvertUtils.value2dp(R.dimen.dp_32).dp)
.fillMaxWidth(),
//标题导航
title = {
Row(
modifier = Modifier
.fillMaxSize()
.wrapContentSize(Alignment.CenterStart)
) {
mViewModel.mTopNavigationTitle.forEachIndexed { index, title ->
if (mViewModel.mPagerState.value.currentPage == index) {
Box(
modifier = Modifier
.fillMaxHeight()
.padding(
start = ConvertUtils.value2dp(R.dimen.dp_6).dp,
end = ConvertUtils.value2dp(R.dimen.dp_6).dp
)
.clickable {
CoroutineScope(Dispatchers.Main).launch {
mViewModel.mPagerState.value.scrollToPage(index)
}
}, contentAlignment = Alignment.Center
) {
Text(
title,
fontWeight = FontWeight.Bold,
fontSize = ConvertUtils.value2sp(R.dimen.sp_10).sp,
color = Color(0xFF4A60B6),
textAlign = TextAlign.Center
)
Box(
modifier = Modifier.fillMaxHeight(),
contentAlignment = Alignment.BottomCenter
) {
Spacer(
modifier = Modifier
.height(ConvertUtils.value2dp(R.dimen.dp_1).dp)
.width(ConvertUtils.value2dp(R.dimen.dp_20).dp)
.background(
Color(0xFF4A60B6)
)
)
}
}
} else {
Box(
modifier = Modifier
.fillMaxHeight()
.padding(
start = ConvertUtils.value2dp(R.dimen.dp_6).dp,
end = ConvertUtils.value2dp(R.dimen.dp_6).dp
)
.clickable {
CoroutineScope(Dispatchers.Main).launch {
mViewModel.mPagerState.value.scrollToPage(index)
}
}, contentAlignment = Alignment.Center
) {
Text(
title,
fontWeight = FontWeight.Bold,
fontSize = ConvertUtils.value2sp(R.dimen.sp_10).sp,
color = Color(0xFFc7c7c7),
textAlign = TextAlign.Center
)
}
}
}
}
},
//信息按钮
actions = {
IconButton(onClick = {
}) {
Image(
painter = painterResource(R.mipmap.ic_msg),
contentDescription = "",
modifier = Modifier.size(ConvertUtils.value2dp(R.dimen.dp_14).dp)
)
}
},
//背景色
backgroundColor = Color(0xFF111C2E),
//内容颜色
contentColor = Color(0xFFc7c7c7),
)
//mPagerState滑动回调
LaunchedEffect(mViewModel.mPagerState.value) {
// Collect from the a snapshotFlow reading the currentPage
snapshotFlow { mViewModel.mPagerState.value.currentPage }.collect { page ->
Logger.d("滑动到$page")
mViewModel.mPageIndex.value = page
}
}
//页面内容
HorizontalPager(
count = 3,
state = mViewModel.mPagerState.value,
modifier = Modifier.weight(3f)
) { page ->
when (page) {
0 -> {
Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
Spacer(modifier = Modifier.height(ConvertUtils.value2dp(R.dimen.dp_14).dp))
socializeItemView(true)
Spacer(modifier = Modifier.height(ConvertUtils.value2dp(R.dimen.dp_14).dp))
socializeItemView(false)
Spacer(modifier = Modifier.height(ConvertUtils.value2dp(R.dimen.dp_14).dp))
socializeItemView(true)
}
}
1 -> Text(text = "好友")
2 -> Text(text = "我的作品")
}
}
Spacer(modifier = Modifier.size(ConvertUtils.value2dp(R.dimen.dp_11).dp))
}
Efecto
