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
- }
- }
- }