Compose进度条

Compose进度条

圆形进度条

CircularProgressIndicator(
    //0.0表示没有进度，1.0表示已完成进度
    progress = index.toFloat(),
    //大小设置
    modifier = Modifier.size(50.dp),
    //颜色设置
    color = Color.Red,
    //宽度设置
    strokeWidth = 4.dp,
)

圆形进度条用CircularProgressIndicator组件：

progress属性设置进度条当前进度值，类型为Float，设置参数范围为0.0~1.0。

color属性设置进度条颜色。

strokeWidth属性设置进度条宽度。

条形进度条

LinearProgressIndicator(
    //0.0表示没有进度，1.0表示已完成进度
    progress = index.toFloat(),
    modifier = Modifier.padding(10.dp),
    color = Color.Yellow,
)

条形进度条用LinearProgressIndicator组件。

完整代码：

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.cwj.composedemo.ui.theme.ComposeDemoTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeDemoTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    val index = rememberSaveable { mutableStateOf(0.2) }
                    Greeting(index.value) {
                        index.value = it
                    }
                }
            }
        }
    }
}

@Composable
fun Greeting(index: Double, onIndexChangeInt: (Double) -> Unit) {
    Column(
        modifier = Modifier.fillMaxSize(),
        //横向居中
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        //圆形进度条
        CircularProgressIndicator(
            //0.0表示没有进度，1.0表示已完成进度
            progress = index.toFloat(),
            //大小设置
            modifier = Modifier.size(50.dp),
            //颜色设置
            color = Color.Red,
            //宽度设置
            strokeWidth = 4.dp,
        )

        //条形进度条
        LinearProgressIndicator(
            //0.0表示没有进度，1.0表示已完成进度
            progress = index.toFloat(),
            modifier = Modifier.padding(10.dp),
            color = Color.Yellow,
        )

        Button(
            //边框宽度与颜色设置
            border = BorderStroke(2.dp, color = colorResource(id = R.color.purple_200)),
            //圆角设置
            shape = RoundedCornerShape(8.dp),
            colors = ButtonDefaults.buttonColors(
                //容器颜色
                containerColor = colorResource(id = R.color.purple_500),
                //内容颜色
                contentColor = colorResource(id = R.color.white),
            ),
            onClick = {
                if (index >= 1) {
                    onIndexChangeInt(0.0)
                } else {
                    onIndexChangeInt(index + 0.2)
                }
            }
        ) {
            Text(
                text = stringResource(id = R.string.add),
            )
        }
    }
}

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun GreetingPreview() {
    ComposeDemoTheme {
        val index = rememberSaveable { mutableStateOf(0.2) }
        Greeting(index.value) {
            index.value = it
        }
    }
}