Jetpack Compose 浮动按钮与进度条组件使用示例

Jetpack Compose 浮动按钮、Slider 滑动条、LinearProgressIndicator 水平进度条、CircularProgressIndicator 圆形进度条的使用

FloatingActionButton 浮动按钮

class SliderActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            testBase()
        }
    }

    @Preview
    @Composable
    private fun testBase() {
        Scaffold(
            floatingActionButton = {
                FloatingActionButton(
                    onClick = { 
                        print("点击浮动窗口")
                        Toast.makeText(this, "点击浮动窗口", Toast.LENGTH_LONG).show()
                    },
                    shape = CircleShape,
                    content = { Icon(Icons.Filled.Add, contentDescription = "Add") },
                    modifier = Modifier.size(80.dp)
                )
            }
        ) {
            Column() {
                Box(
                    modifier = Modifier.fillMaxWidth(),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = "Compose", fontSize = 30.sp, color = Color.Black)
                }
                /*Text(text = "FloatingActionButton 浮动按钮、Slider 滑动条、LinearProgressIndicator 水平进度条、CircularProgressIndicator（圆形进度指示器）", fontSize = 16.sp, color = Color.Red)
                Spacer(modifier = Modifier.height(20.dp))*/
                Text(text = "Slider 滑动条", fontSize = 20.sp, color = Color.Blue)
                testSlider()
                Spacer(modifier = Modifier.height(20.dp))
                testLinearProgressIndicator()
                Spacer(modifier = Modifier.height(20.dp))
                testCircularProgressIndicator()
            }
        }
    }

    //测试 Slider 滑动条
    @Composable
    private fun testSlider(){
        val sliderValue = remember { mutableStateOf(100f) }
        Slider(
            value = sliderValue.value,
            onValueChange = { newValue -> sliderValue.value = newValue },
            valueRange = 0f..100f,
            steps = 10,
            modifier = Modifier.width(300.dp)
        )
    }

    //线性进度条
    @Composable
    private fun testLinearProgressIndicator(){
        //要添加 Composable，导入：import androidx.compose.runtime.setValue
        var progress by remember { mutableStateOf(0.0f) }
        var loading by remember { mutableStateOf(false) }
        Column(
            modifier = Modifier.fillMaxWidth().padding(16.dp).height(200.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Text("线性进度条 LinearProgressIndicator", fontSize = 20.sp, color = Color.Blue)
            Text("点击'增加进度'看变化，下载进度：${(progress * 100).toInt()} %")
            Spacer(modifier = Modifier.height(8.dp))
            LinearProgressIndicator(progress = progress, modifier = Modifier.fillMaxWidth())
            Spacer(modifier = Modifier.height(12.dp))
            //不确定进度
            Spacer(modifier = Modifier.height(8.dp))
            if(loading){
                LinearProgressIndicator(modifier = Modifier.fillMaxWidth())
            }
            Spacer(modifier = Modifier.height(12.dp))
            //控制按钮
            Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
                Button(
                    onClick = { 
                        progress = 0f
                        loading = true
                    },
                    enabled = !loading
                ) {
                    Text("开始加载")
                }
                Button(
                    onClick = { 
                        if(progress < 1f) progress += 0.1f
                    },
                    enabled = loading && progress < 1f
                ) {
                    Text("增加进度")
                }
                Button(onClick = { 
                    loading = false
                    progress = 0f
                }) {
                    Text("重置")
                }
            }
        }
    }

    //CircularProgressIndicator（圆形进度指示器）
    @Composable
    private fun testCircularProgressIndicator(){
        var progress by remember { mutableStateOf(0.0f) }
        var loading by remember { mutableStateOf(false) }
        Column(
            modifier = Modifier.fillMaxWidth().padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            //verticalArrangement = Arrangement.Center
        ) {
            Text("圆形进度条 CircularProgressIndicator", fontSize = 20.sp, color = Color.Blue)
            //不确定进度指示器
            CircularProgressIndicator(modifier = Modifier.size(64.dp))
            Spacer(modifier = Modifier.height(32.dp))
            //带进度的指示器
            Box(contentAlignment = Alignment.Center){
                CircularProgressIndicator(
                    progress = progress,
                    modifier = Modifier.size(200.dp),
                    strokeWidth = 8.dp
                )
                Text(
                    text = "${(progress * 100).toInt()} %",
                    style = MaterialTheme.typography.headlineMedium
                )
                Spacer(modifier = Modifier.height(52.dp))
                //小型指示器
                Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
                    CircularProgressIndicator(modifier = Modifier.size(20.dp), strokeWidth = 2.dp)
                    Text("正在同步数据...", color = Color.Red)
                }
                Spacer(modifier = Modifier.height(32.dp))
                //控制按钮
                Button(onClick = { 
                    progress = 0f
                    loading = true
                    for(i in 1..10){
                        CoroutineScope(Dispatchers.IO).launch { 
                            delay(2000L) // 需要导入：kotlinx.coroutines.delay
                        }
                        progress = i / 10f
                    }
                    loading = false
                }) {
                    Text("模拟下载")
                }
            }
        }
    }
}