compose 指示器水平移动的思路

52 阅读1分钟
class MainActivity : ComponentActivity() {
    @SuppressLint("UnrememberedMutableState")
    @OptIn(ExperimentalAnimationApi::class, ExperimentalMaterialApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeStudyTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center){

                        val index = remember {
                            mutableStateOf(0)
                        }
                        createBox(index.value)
                        Box(modifier = Modifier.size(50.dp).background(color = Color.Yellow).clickable {
                            index.value = index.value + 1
                        })
                    }
                }
            }
        }
    }

    @Composable
    fun createBox(index:Int){
        val currentTabWidth by animateDpAsState(
            targetValue =  index * 100.dp,
            animationSpec = tween(durationMillis = 2500, easing = FastOutSlowInEasing)
        )
        Box(modifier = Modifier
            .fillMaxWidth()
            .wrapContentSize(Alignment.BottomStart)
            .offset(x = currentTabWidth)
            .width(100.dp)
            .fillMaxWidth()
            .height(10.dp)
            .background(color = Color.Red)
        )
    }
}

加油.png