Jetpack?Compose怎么實現對話框和進度條

這篇文章主要介紹“Jetpack Compose怎么實現對話框和進度條”，在日常操作中，相信很多人在Jetpack Compose怎么實現對話框和進度條問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Jetpack Compose怎么實現對話框和進度條”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

概述

對話框和進度條其實并無多大聯系，放在一起寫是因為兩者的內容都不多，所以湊到一起，對話框是我們平時開發使用得比較多的組件，像隱私授權，用戶點擊刪除時給用戶提示這是一個危險操作等，進度條的使用頻率也很高，比如下載文件，上傳文件，處理任務時都可以使用進度條，讓用戶知道系統還在運行，沒有死機。

實例解析

1.對話框Dialog

首先我們可以先看下Compose中對話框的參數列表

@Composable
fun Dialog(
    onDismissRequest: () -> Unit, // 當我們打算關閉對話框時會執行
    properties: DialogProperties = DialogProperties(), // 對話框的屬性，用于自定義
    content: @Composable () -> Unit // 對話框的內容
)

從對話框組件的參數列表來看，參數不多，只有三個，但是實現的內容卻不輸傳統的view，其中content參數允許我們通過傳入自己的Composable組件來描述對話框的界面，例如，我們想實現對話框Dialog的寬度不受限制，達到全屏的效果，代碼如下：

 @OptIn(ExperimentalComposeUiApi::class)
    @Composable
    fun FullDialog() {
        Dialog(
            onDismissRequest = { /*TODO*/ },
            properties = DialogProperties(usePlatformDefaultWidth = false)
        ) {
            Surface(modifier = Modifier.fillMaxSize(), color = Color.Gray) {
                Text(text = "Hello World")
            }
        }
    }

properties 參數用于定制一些對話框特有的行為：

@Immutable
class DialogProperties @ExperimentalComposeUiApi constructor(
    val dismissOnBackPress: Boolean = true, // 是否可以在按下系統返回鍵的時候取消對話框
    val dismissOnClickOutside: Boolean = true,// 是否可以點擊對話框以外的區域取消對話框
    val securePolicy: SecureFlagPolicy = SecureFlagPolicy.Inherit,
    @Suppress("EXPERIMENTAL_ANNOTATION_ON_WRONG_TARGET")
    @get:ExperimentalComposeUiApi
    val usePlatformDefaultWidth: Boolean = true // 對話框的內容是否需要限制在平臺默認的范圍之內
)

需要注意的是，Compose的對話框不像傳統視圖的對話框那樣，可以通過show(),dismiss()等命令的方式顯示或者隱藏，它像不同的Compose組件一樣，顯示與否需要看是否在重組中被執行，也就是說在Comopose中對話框的顯示或者隱藏要看狀態的控制，Dialog和普通組件的不同之處在于對話框底層需要依賴獨立的Window顯示

下面我們看下如何使用狀態控制對話框的顯示和隱藏：

 @Composable
    fun DialogDemo(){
        val openDialog = remember {
            mutableStateOf(true)
        }
        val dialogWidth = 200.dp
        val dialogHeight = 50.dp
        if(openDialog.value){
            Dialog(onDismissRequest = { openDialog.value = false }) {
                Box(modifier = Modifier
                    .size(dialogWidth, dialogHeight)
                    .background(Color.White)){
                    Text(text = "Hello World")
                }
            }
        }
    }

運行結果如下：

在Dialog組件顯示的過程中，當點擊對話框以外的區域時，onDismissRequest會觸發執行，修改openDialog狀態為false,從而觸發DialogDemo重組，此時判斷openDialog為false，Dialog無法被執行，對話框消失。

我們接下來再看下一個警告對話框應該怎么做，警告對話框(Alertdialog)組件是比Dialog組件更高級別的封裝，遵循Material Design設計標準。它幫我們定好了標題，內容文本以及按鈕的位置，我們只需要提供相應的內容即可，下面演示如何使用AlertDialog

    @Composable
    fun AlertDialogDemo()
    {
        val openDialog = remember {
            mutableStateOf(true)
        }
        if(openDialog.value){
            AlertDialog(onDismissRequest = { openDialog.value = false },
            title = {
                Text(text = "開啟位置服務")
            }, text = {
                Text(text = "這將意味著我們會給您提供精確的位置信息")
                },
            confirmButton = {
                TextButton(onClick = { openDialog.value = false}) {
                    Text(text = "同意")
                }
            },
            dismissButton = {
                TextButton(onClick = {  openDialog.value = false}) {
                    Text(text = "取消")
                }
            })
        }
    }

運行結果：

2.進度條

Compose自帶了兩種material Design進度條，分別是圓形進度條和直線進度條，他們都有兩種狀態，一種是無限加載的，另一種是根據值來動態顯示的，我們就以一個圓形的進度條來演示Compose中進度條的使用吧，代碼如下：

  @Composable
    fun ProgressBarDemo()
    {
        var progress by remember {
            mutableStateOf(0.1f)
        }
        val animatedProgress by animateFloatAsState(targetValue = progress,
        animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec)
        Column {
            CircularProgressIndicator(progress = animatedProgress)
            Spacer(modifier = Modifier.requiredHeight(30.dp))
            OutlinedButton(onClick = { if (progress < 1f) progress += 0.1f}) {
                Text(text = "增加進度")
            }
        }
    }

運行結果如下：

如上面代碼所示，當我們點擊一次按鈕時，進度就會增加10%，當不設置progress時，就是無限加載的進度條，另外，還有一種時直線進度條（LinearProgressIndicator)，使用方法和圓形進度條完全一致

到此，關于“Jetpack Compose怎么實現對話框和進度條”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！