先搭建好之后呢，我們就來(lái)做第1個(gè)例子。

永遠(yuǎn)的Hello World

先搭建好之后呢，我們就來(lái)做第1個(gè)例子，編程的第1個(gè)例子永遠(yuǎn)是hello world的，下面呢，我們就來(lái)做hello world的例子。

實(shí)現(xiàn)hello的例子步驟如下。

創(chuàng)建項(xiàng)目，啟動(dòng)Android Studio工具，新建一個(gè)項(xiàng)目，在New Project對(duì)話框中Empty Compose Activity，如圖所示。

然后點(diǎn)擊下一步打開(kāi)對(duì)話框，如圖所示。

大家可以根據(jù)自己的情況輸入項(xiàng)目名和包，然后單擊Finish按鈕創(chuàng)建項(xiàng)目。

項(xiàng)目創(chuàng)建好了之后，大家可以看到MainActivity代碼：

package com.zhijieketang.helloproj
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.zhijieketang.helloproj.ui.theme.HelloProjTheme
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HelloProjTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}
@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    HelloProjTheme {
        Greeting("Android")
    }
}

此時(shí)那你就可以運(yùn)行了，但是這并不是我們所需要的hello world，我們還需要修改一下代碼。

修改代碼，為了在頁(yè)面中顯示hello world，我們需要修改代碼。

package com.zhijieketang.helloproj
...
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting("World")
        }
    }
}
@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

代碼修改完成之后，我們就可以運(yùn)行了。

運(yùn)行結(jié)果如下圖所示。

分解的HelloWorld代碼

了剛才的 Hello World 的例子運(yùn)行起來(lái)后，接下來(lái)我們來(lái)解析一下它的代碼。其中修改的最核心的代碼在以下部分：

package com.zhijieketang.helloproj
...
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {				①
            Greeting("World")	
        }							②
    }
}
@Composable
fun Greeting(name: String) {		③
    Text(text = "Hello $name!")		
}

• 上述代碼第①~②行的setContent{…}是Kotlin語(yǔ)言中的一個(gè)lambda表達(dá)式，在該個(gè)表達(dá)式中，"World"被傳遞給一個(gè)名為Greeting的函數(shù)，然后這個(gè)函數(shù)被用作setContent方法的參數(shù)。
• 代碼第③行的Greeting函數(shù)是組合函數(shù)（Compose functions）。

在Jetpack Compose中的UI界面由組合函數(shù)（Compose functions）構(gòu)成。這些函數(shù)都是使用Kotlin編寫(xiě)的，是采用注解 @Composable 標(biāo)記的函數(shù)，表示這個(gè)函數(shù)是用來(lái)創(chuàng)建UI的。

Composable函數(shù)具有以下特點(diǎn)：

• 可以嵌套調(diào)用，形成組合函數(shù)，使得復(fù)雜的UI可以通過(guò)簡(jiǎn)單的組合函數(shù)實(shí)現(xiàn)。
• 在Composable函數(shù)內(nèi)部，可以直接調(diào)用其他Composable函數(shù)、傳遞參數(shù)以及執(zhí)行控制流操作，不需要手動(dòng)管理UI狀態(tài)。
• Composable函數(shù)具有函數(shù)式編程的特點(diǎn)，即輸入確定，輸出確定，不依賴外部狀態(tài)，因此可以進(jìn)行高效的重用和測(cè)試。

一個(gè)基本的Composable函數(shù)的結(jié)構(gòu)如下：

@Composable
fun MyComposableFunction() {
    // 組合UI`元素
}

預(yù)覽函數(shù)

使用Android Studio Canary版本還提供了一個(gè)布局預(yù)覽功能（Jetpack Compose Preview），他 會(huì)實(shí)時(shí)更新，以反映開(kāi)發(fā)者對(duì)組合函數(shù)的更改。這使開(kāi)發(fā)者可以更快地進(jìn)行UI開(kāi)發(fā)和測(cè)試。注意它不會(huì)重啟設(shè)備和重新安裝應(yīng)用，因此內(nèi)存占用較少。

Jetpack Compose 還提供了 @Preview 注解，使開(kāi)發(fā)者能夠在開(kāi)發(fā)過(guò)程中輕松預(yù)覽和測(cè)試這些可組合函數(shù)。預(yù)覽函數(shù)也是可組合函數(shù)，它使用 @Composable 注解來(lái)標(biāo)識(shí)一個(gè)可組合函數(shù)。示例點(diǎn)如下：

...
@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}
@Preview(name = "預(yù)覽")   // 預(yù)覽函數(shù)注解
@Composable
fun PreviewGreeting() {
    Greeting("World")
}
...

上述代碼@Preview(name = “預(yù)覽”) 是注解PreviewGreeting()函數(shù)為預(yù)覽函數(shù)，其中name 屬性用于為該預(yù)覽函數(shù)提供一個(gè)名稱。這個(gè)名稱可以讓開(kāi)發(fā)者在 Android Studio 的預(yù)覽面板中更容易地找到和區(qū)分多個(gè)預(yù)覽的UI。另外，需要注意的是它不能夠帶有參數(shù)。

聲明了預(yù)覽函數(shù)之后，如下圖所示即便是應(yīng)用程序沒(méi)有啟動(dòng)，開(kāi)發(fā)人員也會(huì)看到預(yù)覽窗口中UI的狀態(tài)。

事實(shí)上，開(kāi)發(fā)人者直接修改代碼并將其保存后，也可以讓?xiě)?yīng)用程序的UI狀態(tài)也會(huì)立即反映在設(shè)備上，這是Jetpack Compose 的熱重載功能，它可以讓開(kāi)發(fā)者在修改代碼并保存后，應(yīng)用程序的 UI 狀態(tài)會(huì)立即反映在設(shè)備上，從而加快了開(kāi)發(fā)速度。

**提示：**熱重載與用預(yù)覽功能區(qū)別。

• 目的不同：熱重載的主要目的是在代碼修改后能夠立即反映在應(yīng)用程序的 UI 上，從而讓開(kāi)發(fā)者能夠更快地查看和測(cè)試代碼修改的結(jié)果。而預(yù)覽函數(shù)的主要目的是讓開(kāi)發(fā)者在構(gòu)建 UI 時(shí)進(jìn)行調(diào)試和測(cè)試，可以在不需要運(yùn)行應(yīng)用程序的情況下預(yù)覽和測(cè)試組件。
• 使用場(chǎng)景不同：熱重載適用于快速查看和測(cè)試代碼修改的結(jié)果，但不能提供完整的 UI 預(yù)覽和測(cè)試功能。而預(yù)覽函數(shù)可以讓開(kāi)發(fā)者在不同的設(shè)備和主題條件下預(yù)覽和測(cè)試組件，以及測(cè)試組件的外觀和行為。
• 支持功能不同：熱重載支持修改所有的代碼和資源文件，包括組件代碼、布局文件和樣式文件等。而預(yù)覽函數(shù)主要用于測(cè)試和預(yù)覽組件代碼，不能修改其他代碼和資源文件。

綜上所述，熱重載和預(yù)覽功能在 Jetpack Compose 開(kāi)發(fā)中都有其獨(dú)特的用途和優(yōu)點(diǎn)。對(duì)于不同的開(kāi)發(fā)場(chǎng)景和需求，您可以根據(jù)實(shí)際情況選擇使用熱重載或預(yù)覽函數(shù)，以提高開(kāi)發(fā)效率和開(kāi)發(fā)體驗(yàn)。

到此這篇關(guān)于Android使用Jetpack Compose開(kāi)發(fā)零基礎(chǔ)起步教程的文章就介紹到這了,更多相關(guān)Android Jetpack Compose內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論