Jetpack Compose學習(1)——從登陸頁開始入門

原文地址:Jetpack Compose學習(1)——從登陸頁開始入門 | Stars-One的雜貨小窩

Jetpack Compose UI在前幾天出了1.0正式版,以前一直還在觀望,終因而出了正式版 😃 趁着無事,來篇入門教程,但願給各位一點參考

注:因爲compose UI使用了kotlin的DSL語言特性,因此須要熟悉Kotlin

Jetpack Compose介紹

Jetpack Compose 是一個用於構建原生 Android UI 的現代工具包。Jetpack Compose 用更少的代碼、強大的工具和直觀的 Kotlin API 簡化並加速了 Android 上的 UI 開發。

Jetpack Compose使用了聲明式來編寫UI,本質上就是用代碼寫佈局,這裏說的代碼不是特指,主要是與html、xml等標識語言進行區別，在xml等語言中，咱們沒法使用if或循環等結構體來構造UI，而JetCompose Compose 而能夠實現這點,這樣會讓咱們佈局更加靈活

若是以前各位也是接觸過Flutter,就會和我有同樣的體會,Jetpack Compose裏面的組件類定義跟Flutter那邊十分一致,我猜想確定是有借鑑,畢竟那邊也是Google公司旗下的團隊整的

過多的就不說了,上正文吧 😝

簡單Hello World

首先,你須要一臺聯網的電腦,下載Android Studio最新版（2020.3.1） 🦊，很久沒升級了，界面都感受面目一新了 😮

以後的環境配置這裏很少說了,下SDK,下模擬器,新人來 估計得折騰一天 因爲我以前就已經下載過Android Studio,這裏直接下載好以後就可使用了

咱們按照官方的教程,直接新建一個Jetpack Compose項目

以後常規操做 ,填寫相關的包名便可新建了,以後又是等待下載相關依賴的東西,一切下載完畢就準備OK了

可一看右邊,一個紅色的背景,頓時人就有點煩了,還好不是什麼大問題,它提示咱們須要build一下項目

行吧,我build一下,而後,人傻了,直接爆紅了💢

一看提示 好傢伙,最低的Java環境要11了,我也是服了,百度一搜

原來是Android官方那邊的坑,直接把gradle升級到最新版,你說你升級就升級吧,可沒想到gradle那邊最新版棄用JDK8了

解決方法有兩個

• 更改Android Gradle Plugin和Gradle版本
• 使用JDK11環境

更改Android Gradle Plugin和Gradle版本,也就是下圖這兩個東西,本身參考下以前舊版本項目的版本號改便可

PS: 經過File -> Project Structure打開下面的界面

下圖是我本身舊項目使用的版本號,各位能夠參考下

至於換JDK11,其實也是比較簡單,我是環境變量都是用着JDK8,由於還有舊項目須要使用(TornadoFx),因此,咱們只改項目裏使用的JDK版本便可

進到設置裏修改便可,以下圖

Android Studio其實內置有個JDK11,咱們直接使用這個便可,並且,不會影響其餘新開的項目

通過上面的設置後,咱們能夠從新build下項目,能夠發現右側已經能夠預覽了

咱們先簡單分析一下代碼

onCreate()中,有個setContent(),用來設置頁面的主體內容,咱們先無論ComposeDemoTheme和Surface,Greeting("Android")是咱們要關心的

setContent {
    ComposeDemoTheme {
        // A surface container using the 'background' color from the theme
        Surface(color = MaterialTheme.colors.background) {
            Greeting("Android")
        }
    }
}

此方法上有個註解@Composable,用來表示當前方法返回的是一個組件,咱們能夠更改其中的數值,能夠看到右側會實時的進行變化

提示: 實時渲染只針對數值的改變,若是你新增一個組件,是沒有實時變化效果的,須要從新build一次

下面也有個方法,除了@Composable註解,還有有個@Preview,Preview主要是標明用來預覽的

標有@Preview註解的方法,不能存在有參數,不然沒法預覽

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeDemoTheme {
        // A surface container using the 'background' color from the theme
        Surface(color = MaterialTheme.colors.background) {
            Greeting("Android")
        }
    }
}

登陸頁實現

上面也是比較簡單的講解了下代碼,下面咱們來個登陸頁實例來操做下吧

與Flutter同樣,Jetpack Compose沒有線性佈局(LinearLayout),但有Row和Column兩個佈局,從名字能夠看得出來,一種是水平佈局,一種是垂直佈局

咱們先簡單搭建個登陸頁面

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeDemoTheme {
        Column() {
            Row() {
                Text(text = "用戶名")
                TextField(value = "", onValueChange = {str -> Log.e("test",str)})
            }
            Row() {
                Text(text = "密碼")
                TextField(value = "", onValueChange = {str -> Log.e("test",str)})
            }
            TextButton(onClick = { }) {
                Text(text = "登陸")
            }
        }
    }
}

上面代碼中出現了幾個組件Text,TextField和TextButton,字面意思很好理解

組件名	做用
Text	文本
TextField	輸入框
TextButton	文字按鈕

預覽效果以下圖所示:

測試的發現,沒法輸入文字,這是怎麼回事呢?

由於Jetpack Compose使用了相似MVVM的數據綁定的方式,因此,咱們得給輸入框綁定一個變量,onValueChange方法數值改變的時候會回調,咱們在回調更改變量的數值便可達到更改UI的效果

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    var name by remember { mutableStateOf("") }
    var pwd by remember { mutableStateOf("") }

    ComposeDemoTheme {
        Column() {
            Row() {
                Text(text = "用戶名")
                TextField(value = name, onValueChange = { str -> name = str })
            }
            Row() {
                Text(text = "密碼")
                TextField(value = pwd, onValueChange = { str -> pwd = str })
            }
            TextButton(onClick = { }) {
                Text(text = "登陸")
            }
        }
    }
}

上面代碼出現了remember和mutableStateOf的兩個關鍵字,但本章做爲入門篇,先暫時不講解過多知識,先放着,後續再進行補充

最後,咱們還差一步,就是判斷輸入的帳號和密碼是否正確,而後彈出登陸失敗或登陸成功的提示

這裏,我準備使用傳統簡單的Toast進行提示,可是Toast須要傳一個Context,因爲組件的那個函數是寫在Activity外面的,因此是拿不到Activity自己的,可是咱們能夠把Activity自己傳到方法裏(但不肯定我這方法規不規範)

PS:看了下對話框的使用,以爲有些複雜,也是放在以後再講解吧

@Composable
fun DefaultPreview(context: Activity) {
    var name by remember { mutableStateOf("") }
    var pwd by remember { mutableStateOf("") }

    ComposeDemoTheme {
        Column() {
            Row() {
                Text(text = "用戶名")
                TextField(value = name, onValueChange = { str -> name = str })
            }
            Row() {
                Text(text = "密碼")
                TextField(value = pwd, onValueChange = { str -> pwd = str })
            }
            TextButton(onClick = {
                if (name == "test" && pwd == "123") {
                    Toast.makeText(context, "登陸成功", Toast.LENGTH_SHORT).show()
                } else {
                    Toast.makeText(context, "登陸失敗", Toast.LENGTH_SHORT).show()
                }
            }) {
                Text(text = "登陸")
            }
        }
    }
}

最後效果以下圖所示

參考

• TextField - Jetpack Compose