Jetpack Compose實(shí)現(xiàn)對話框和進(jìn)度條實(shí)例解析
概述
對話框和進(jìn)度條其實(shí)并無多大聯(lián)系,放在一起寫是因?yàn)閮烧叩膬?nèi)容都不多,所以湊到一起,對話框是我們平時(shí)開發(fā)使用得比較多的組件,像隱私授權(quán),用戶點(diǎn)擊刪除時(shí)給用戶提示這是一個(gè)危險(xiǎn)操作等,進(jìn)度條的使用頻率也很高,比如下載文件,上傳文件,處理任務(wù)時(shí)都可以使用進(jìn)度條,讓用戶知道系統(tǒng)還在運(yùn)行,沒有死機(jī)。本文將介紹在Compose中如何使用對話框和進(jìn)度條
實(shí)例解析
1.對話框Dialog
首先我們可以先看下Compose中對話框的參數(shù)列表
@Composable fun Dialog( onDismissRequest: () -> Unit, // 當(dāng)我們打算關(guān)閉對話框時(shí)會(huì)執(zhí)行 properties: DialogProperties = DialogProperties(), // 對話框的屬性,用于自定義 content: @Composable () -> Unit // 對話框的內(nèi)容 )
從對話框組件的參數(shù)列表來看,參數(shù)不多,只有三個(gè),但是實(shí)現(xiàn)的內(nèi)容卻不輸傳統(tǒng)的view,其中content參數(shù)允許我們通過傳入自己的Composable組件來描述對話框的界面,例如,我們想實(shí)現(xiàn)對話框Dialog的寬度不受限制,達(dá)到全屏的效果,代碼如下:
@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 參數(shù)用于定制一些對話框特有的行為:
@Immutable class DialogProperties @ExperimentalComposeUiApi constructor( val dismissOnBackPress: Boolean = true, // 是否可以在按下系統(tǒng)返回鍵的時(shí)候取消對話框 val dismissOnClickOutside: Boolean = true,// 是否可以點(diǎn)擊對話框以外的區(qū)域取消對話框 val securePolicy: SecureFlagPolicy = SecureFlagPolicy.Inherit, @Suppress("EXPERIMENTAL_ANNOTATION_ON_WRONG_TARGET") @get:ExperimentalComposeUiApi val usePlatformDefaultWidth: Boolean = true // 對話框的內(nèi)容是否需要限制在平臺(tái)默認(rèn)的范圍之內(nèi) )
需要注意的是,Compose的對話框不像傳統(tǒng)視圖的對話框那樣,可以通過show(),dismiss()等命令的方式顯示或者隱藏,它像不同的Compose組件一樣,顯示與否需要看是否在重組中被執(zhí)行,也就是說在Comopose中對話框的顯示或者隱藏要看狀態(tài)的控制,Dialog和普通組件的不同之處在于對話框底層需要依賴獨(dú)立的Window顯示
下面我們看下如何使用狀態(tài)控制對話框的顯示和隱藏:
@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") } } } }
運(yùn)行結(jié)果如下:
在Dialog組件顯示的過程中,當(dāng)點(diǎn)擊對話框以外的區(qū)域時(shí),onDismissRequest會(huì)觸發(fā)執(zhí)行,修改openDialog狀態(tài)為false,從而觸發(fā)DialogDemo重組,此時(shí)判斷openDialog為false,Dialog無法被執(zhí)行,對話框消失。
我們接下來再看下一個(gè)警告對話框應(yīng)該怎么做,警告對話框(Alertdialog)組件是比Dialog組件更高級別的封裝,遵循Material Design設(shè)計(jì)標(biāo)準(zhǔn)。它幫我們定好了標(biāo)題,內(nèi)容文本以及按鈕的位置,我們只需要提供相應(yīng)的內(nèi)容即可,下面演示如何使用AlertDialog
@Composable fun AlertDialogDemo() { val openDialog = remember { mutableStateOf(true) } if(openDialog.value){ AlertDialog(onDismissRequest = { openDialog.value = false }, title = { Text(text = "開啟位置服務(wù)") }, text = { Text(text = "這將意味著我們會(huì)給您提供精確的位置信息") }, confirmButton = { TextButton(onClick = { openDialog.value = false}) { Text(text = "同意") } }, dismissButton = { TextButton(onClick = { openDialog.value = false}) { Text(text = "取消") } }) } }
運(yùn)行結(jié)果:
2.進(jìn)度條
Compose自帶了兩種material Design進(jìn)度條,分別是圓形進(jìn)度條和直線進(jìn)度條,他們都有兩種狀態(tài),一種是無限加載的,另一種是根據(jù)值來動(dòng)態(tài)顯示的,我們就以一個(gè)圓形的進(jìn)度條來演示Compose中進(jìn)度條的使用吧,代碼如下:
@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 = "增加進(jìn)度") } } }
運(yùn)行結(jié)果如下:
如上面代碼所示,當(dāng)我們點(diǎn)擊一次按鈕時(shí),進(jìn)度就會(huì)增加10%,當(dāng)不設(shè)置progress時(shí),就是無限加載的進(jìn)度條,另外,還有一種時(shí)直線進(jìn)度條(LinearProgressIndicator),使用方法和圓形進(jìn)度條完全一致
總結(jié)
到此這篇關(guān)于Jetpack Compose實(shí)現(xiàn)對話框和進(jìn)度條實(shí)例解析的文章就介紹到這了,更多相關(guān)Jetpack Compose對話框和進(jìn)度條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
android調(diào)用原生圖片裁剪后圖片尺寸縮放的解決方法
這篇文章主要為大家詳細(xì)介紹了android調(diào)用原生圖片裁剪后圖片尺寸縮放的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03flutter開發(fā)技巧自定頁面指示器PageIndicator詳解
這篇文章主要為大家介紹了flutter開發(fā)技巧自定頁面指示器PageIndicator詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01android studio編譯jar包或者aar包的方法教程詳解
這篇文章主要介紹了android studio編譯jar包或者aar包的方法教程,本文通過圖文并茂的形式給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03詳解Android自定義控件屬性TypedArray以及attrs
這篇文章主要為大家介紹了android自定義控件屬性TypedArray以及attrs,感興趣的小伙伴們可以參考一下2016-01-01