Focus

预览

功能

主界面

星球列表界面

新建星球界面

主要实现

架构

//将state的setter设置为私有,使状态只能在dispatch()中修改,保证数据只能单向修改
var mainPageViewStates by mutableStateOf(MainPageViewState())
 private set
//主界面ViewModel中统一对事件进行处理
fun dispatch(action: MainPageAction) {
 when (action) {
 is MainPageAction.DegreeUpdate -> degreeUpdate(action.degree)
 is MainPageAction.SelectStar -> selectStar(action.todoStar)
 is MainPageAction.StarChanged -> mainPageViewStates.starChanged.value = false
 is MainPageAction.NewStarPage -> mainPageViewStates.sheetPage.value =
 BottomSheetPage.NewStarPage
 is MainPageAction.BackToStarList -> mainPageViewStates.sheetPage.value =
 BottomSheetPage.StarListPage
 is MainPageAction.AddStar -> mainPageViewStates.addStar.value = true
 is MainPageAction.RefreshStar -> mainPageViewStates.refreshStarList.value++
 is MainPageAction.CountdownStart->countDownStart()
 is MainPageAction.Countdown -> countDown()
 is MainPageAction.InitSelectedStar -> initSelectedStar()
 }
//界面事件的密封类
sealed class MainPageAction {
 class DegreeUpdate(val degree: Float) : MainPageAction()
 .......
 }
}

//为ViewModel加上@HiltViewMode注解
@HiltViewModel
class NewStarViewModel constructor() : ViewModel() {...}
//然后直接在Composable函数的参数中使用hiltViewModel()进行依赖注入
@Composable
fun NewStarPage(
 ...
 viewModel: NewStarViewModel = hiltViewModel()
) {...}

//刷新星球列表数据,使用Flow来获取返回结果
private fun refreshStarList() {
 viewModelScope.launch {
 starDao.queryAllStar().collect {
 if (it.isNotEmpty()){
 starListPageStates.starList.value = it
 }
 }
 }
}

界面

LazyRow(modifier = Modifier
 .fillMaxHeight(0.35f)
 .fillMaxWidth(), content = {
 //已创建星球列表
 for (star in starList) {item {...}}
 //新增星球Item,点击进入新增星球界面
 item {
 NewStarItem (...)
 }
})

//star的详细资料,开始隐藏,当modalBottomSheet展开时出现
AnimatedVisibility(visible = sheetState.currentValue == ModalBottomSheetValue.Expanded) {
 Card(
 shape = RoundedCornerShape(20.dp),
 modifier = Modifier
 .fillMaxHeight(0.7f)
 .fillMaxWidth(),
 ) {...}
}

@Composable
fun DeleteButton(color: Color, onClick: () -> Unit) {
 val colorAnimation1 by rememberInfiniteTransition().animateColor(
 initialValue = color.copy(alpha = 0.35f),
 targetValue = color.copy(alpha = 0.75f),
 animationSpec = InfiniteRepeatableSpec(
 animation = tween(
 durationMillis = 4750 + 500 * color.alpha.toInt(),
 easing = FastOutLinearInEasing,
 delayMillis = 2730 * color.alpha.toInt()
 ),
 repeatMode = RepeatMode.Reverse
 )
 )
 val colorAnimation2 by rememberInfiniteTransition().animateColor(类似上面的实现)
 Card(
 modifier = Modifier
 .padding(start = 10.dp, top = 20.dp, end = 10.dp)
 .height(200.dp)
 .width(175.dp),
 shape = RoundedCornerShape(20.dp)
 ) {
 IconButton(onClick = onClick) {
 Canvas(modifier = Modifier
 .padding(start = 10.dp, top = 40.dp, end = 10.dp)
 .height(170.dp)
 .width(175.dp), onDraw = {
 //渐变色块
 drawCircle(
 brush = Brush.linearGradient(
 colors = listOf(
 colorAnimation2,
 colorAnimation1
 ),
 start = Offset(0f,0f),end = Offset(400.dp.value,400.dp.value),
 ),
 radius = 300.dp.value,
 center = Offset(x = size.width / 2, y = size.height / 2)
 )
 })
 }
 }
}

总结