欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Jetpack Compose按鈕組件使用實(shí)例詳細(xì)講解

 更新時(shí)間:2023年04月17日 10:39:13   作者:海塔燈  
這篇文章主要介紹了Jetpack Compose按鈕組件使用實(shí)例,按鈕組件Button是用戶和系統(tǒng)交互的重要組件之一,它按照Material Design風(fēng)格實(shí)現(xiàn),我們先看下Button的參數(shù)列表,通過參數(shù)列表了解下Button的整體功能

概述

按鈕組件Button是用戶和系統(tǒng)交互的重要組件之一,它按照Material Design風(fēng)格實(shí)現(xiàn),我們先看下Button的參數(shù)列表,通過參數(shù)列表了解下Button的整體功能

@Composable
fun Button(
    onClick: () -> Unit, // 點(diǎn)擊按鈕時(shí)的回調(diào)
    modifier: Modifier = Modifier, // 修飾符
    enabled: Boolean = true, // 是否啟用按鈕
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    elevation: ButtonElevation? = ButtonDefaults.elevation(), // 按鈕的陰影
    shape: Shape = MaterialTheme.shapes.small, 
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
)

Button組件的第一個(gè)參數(shù)onClick是必填項(xiàng),這是按鈕組件最重要的功能,通過回調(diào)響應(yīng)用戶的點(diǎn)擊事件,最后一個(gè)參數(shù)content也是必填項(xiàng),展示按鈕的內(nèi)容。Compose 的Button組件默認(rèn)沒有任何UI,它僅僅是一個(gè)響應(yīng)onClick的容器,它的UI需要在content中通過其他組件實(shí)現(xiàn)

1.普通Button按鈕

假設(shè)我們需要?jiǎng)?chuàng)建一個(gè)顯示文字的Button,代碼如下:

  @Composable
    fun ButtonDemo()
    {
        Button(onClick = { /*TODO*/ }) {
            Text(text = "OK")
        }
    }

運(yùn)行結(jié)果:

假如我們想在按鈕文字的左邊加一個(gè)圖標(biāo),代碼如下

    @Composable
    fun ButtonIconDemo(){
        Button(onClick = { /*TODO*/ }) {
            Icon(imageVector = Icons.Filled.Done, contentDescription = null,
            modifier = Modifier.size(ButtonDefaults.IconSize))
            Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing))
            Text(text = "OK")
        }
    }

這樣就在文字“OK”的左邊加了一個(gè)打勾的圖標(biāo)了

運(yùn)行結(jié)果:

在傳統(tǒng)的Button中,有一個(gè)很好用的功能,就是selector,即點(diǎn)擊按鈕的時(shí)候,可以自定義按鈕的點(diǎn)擊效果,在Compose中當(dāng)然也可以,Button中的參數(shù)interactionSource就是做這個(gè)事情的。interactionSource通過以下的桑格函數(shù)獲取當(dāng)前組件的狀態(tài)的:

interactionSource.collectIsPressedAsState(): 判斷是否是按下狀態(tài)

interactionSource.collectIsFocusedAsState():判斷是否是獲取焦點(diǎn)的狀態(tài)

interactionSource.collectIsDraggedAsState():判斷是否拖動(dòng)

我們可以通過實(shí)例來看下如何使用interacrtionSource來實(shí)現(xiàn)類似傳統(tǒng)button的selector效果,代碼如下:

    @Composable
    fun InteractionButtonDemo()
    {
        val interact = remember {
            MutableInteractionSource()
        }
        val pressState = interact.collectIsPressedAsState()
        val borderColor = if(pressState.value) Color.Green else Color.Red
        Button(onClick = { /*TODO*/ },
           border = BorderStroke(2.dp, color = borderColor),
            interactionSource = interact
        ) {
            Text(text = "Long click")
        }
    }

上面的代碼實(shí)現(xiàn)的是按鈕在通常情況下邊框?yàn)榧t色,點(diǎn)擊的時(shí)候邊框?yàn)榫G色

運(yùn)行結(jié)果:

Button 并非唯一的可點(diǎn)擊組件,理論上任何Compose組件都可以通過Modifier.clickable修飾符制作成可點(diǎn)擊組件,而當(dāng)Button被點(diǎn)擊的時(shí)候,需要額外進(jìn)行一些事件響應(yīng)處理,比如水波紋的處理,Button 的onClick在底層是通過覆蓋Modifier.clickable實(shí)現(xiàn)的,所以我們使用button時(shí)不要為Button覆蓋Modifier.clickable.

2.IconButton圖標(biāo)按鈕

IconButton組件實(shí)際上只是Button組件的簡(jiǎn)單封裝,它就是一個(gè)可以點(diǎn)擊的圖標(biāo),它一般用于應(yīng)用欄中的導(dǎo)航或者其他的行為,我們需要在IconButton組件里面提供一個(gè)圖標(biāo)組件,這個(gè)圖標(biāo)組件的尺寸一般是24x24dp,看下面的例子:

   @Composable
    fun IconButtonDemo()
    {
        IconButton(onClick = { /*TODO*/ }) {
            Icon(imageVector = Icons.Filled.Favorite,
                contentDescription = null)
        }
    }

運(yùn)行結(jié)果

簡(jiǎn)單例子,不多講解

3.FloatingActionButton懸浮按鈕

FloatingActionButton懸浮按鈕代表當(dāng)前頁(yè)面的主要行為,它也需要我們提供一個(gè)Icon組件,代碼如下:

    @Composable
    fun FloatButtonDemo()
    {
        FloatingActionButton(onClick = { /*TODO*/ }) {
            Icon(imageVector = Icons.Filled.ArrowBack, contentDescription = null)
        }
    }

運(yùn)行結(jié)果:

懸浮按鈕其實(shí)還有一個(gè)帶文字的擴(kuò)展懸浮按鈕ExtendedFloatingActionButton組件,使用方法如下:

   @Composable
    fun ExtFloatButtonDemo(){
        ExtendedFloatingActionButton(icon = {Icon(imageVector = Icons.Filled.Favorite, contentDescription = null ) },
            text = { Text(text = "我喜歡的") },
            onClick = { /*TODO*/ })
    }

運(yùn)行結(jié)果:

總結(jié)

以上就是今天的內(nèi)容,本文主要介紹了按鈕組件的使用,以及圖標(biāo)按鈕和懸浮按鈕,這些按鈕在開發(fā)中調(diào)試和實(shí)現(xiàn)實(shí)際的需求都很有用,建議讀者多做練習(xí)。慢慢使用到自己的項(xiàng)目當(dāng)中去

到此這篇關(guān)于Jetpack Compose按鈕組件使用實(shí)例詳細(xì)講解的文章就介紹到這了,更多相關(guān)Jetpack Compose按鈕組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論