先搭建好之后呢，我們就來做第1個例子。

永遠的Hello World

先搭建好之后呢，我們就來做第1個例子，編程的第1個例子永遠是hello world的，下面呢，我們就來做hello world的例子。

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

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

然后點擊下一步打開對話框，如圖所示。

大家可以根據(jù)自己的情況輸入項目名和包，然后單擊Finish按鈕創(chuà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")
    }
}

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

修改代碼，為了在頁面中顯示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!")
}

代碼修改完成之后，我們就可以運行了。

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

分解的HelloWorld代碼

了剛才的 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!")		
}

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

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

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

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

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

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

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

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

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

...
@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ù)提供一個名稱。這個名稱可以讓開發(fā)者在 Android Studio 的預(yù)覽面板中更容易地找到和區(qū)分多個預(yù)覽的UI。另外，需要注意的是它不能夠帶有參數(shù)。

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

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

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

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

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

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

最新評論