環境搭建
開發工具
由于 Jetpack Compose 目前還沒有出正式版，所以要想開發體驗，需要下載 最新 Canary 版的 Android Studio 預覽版，
創建新專案
打開最新 Canary 版的 Android studio 預覽版，創建一個新專案，你會發現創建新專案模板有一個 Empty Compose Activity 的模板，選擇它創建一個專案就可以體驗 Jetpack Compose 了，
在創建 Jetpack Compose 你會發現 _minimumSdkVersion _最小只能選擇 API level 21 ，也就是 Jetpack Compose 支持的最小版本，
專案創建好了，先不著急開發，先看看配置，是如何讓專案支持 Jetpack Compose 開發的，以便以后我們把 Jetpack Compose 添加到以前的專案中去，
- Jetpack Compose 是基于kotlin語言開發的框架，那么你的專案至少要確保支持 kotlin，如果你的專案還不支持，請查看官網教程 將 Kotlin 添加到現有應用 自行配置，( 😲 啥，都2021年了 專案還不支持 kotlin 😝 )，
- 打開專案的
app/build.gradle檔案，關于 Jetpack Compose 的相關配置如下
android {
defaultConfig {
...
// Jetpack Compose 最小支持版本 21
minSdkVersion 21
}
buildFeatures {
// 此 module 啟動 Jetpack Compose
compose true
}
...
//kotlin 相關引數配置
kotlinOptions {
jvmTarget = "1.8"
// 0?? 啟用新的 jvm IR
useIR = true
}
// Jetpack compose 相關引數配置
composeOptions {
//kotlin 額外編譯版本 和Jetpack Compose 版本一致
kotlinCompilerExtensionVersion compose_version
//kotlin編譯版本，要1.4及以上
kotlinCompilerVersion kotlin_version
}
}
dependencies {
...
// Jetpack compose 相關依賴
// 基礎組件
implementation "androidx.compose.ui:ui:$compose_version"
// Material Design 組件相關實作
implementation "androidx.compose.material:material:$compose_version"
// ui相關工具，比如視圖預覽
implementation "androidx.compose.ui:ui-tooling:$compose_version"
}
關于 0?? 配置處參考 kotlin 1.4 新特性 | 新的 JVM IR backend ，
本文 Jetpack compose 版本compose_version = ‘1.0.0-alpha09’ , kotlin 版本 kotlin_version=‘1.4.21’
?? 由于 Jetpack compose 沒有推出正式版，api 可能會有變化，本文后期盡量跟進最新api，如果沒有來得及更新，發現下文中部分 api 不可以用了請多多包涵，或留言告知本人多謝 🙏 ，
看看 Jetpack Compose 長啥樣
打開 MainActivity.kt 檔案，如果編譯順利的話，你應該看到類似下面的樣子
① 重繪視圖，當代碼發生變化是，點擊它可以重繪視圖
②進行互動模式，比如視圖上有個按鈕，就可以不用運行直接點擊并作出對應的回應，
③ 和 ④可以把當前視圖直接部署到設備上看效果，這個還是挺方便的，
更多關于布局預覽工具的使用，可以查看官網上關于此內容的介紹 https://developer.android.google.cn/jetpack/compose/preview
仔細看上圖，你會發現
Text() 是過時的，此處建議替換成androidx.compose.material.Text，在沒有穩定版本，經常 api用著用著過時、改名、或者直接被刪掉都是很正常的 😁 ，
在 Jetpack Compose 作為構建原生界面的工具包，我們還是用 Activity/Fragment 來加載視圖，在以前 XML 布局模式下，Activity 關聯視圖使用 setContentView() 函式，在 Jetpack Compose 中加載關聯視圖使用 setContent 函式，如下所示
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
//添加一個 Jetpack Compose 視圖
Greeting("Android")
}
}
可組合 (Composable) 函式
在以前 View 視圖模式下，我們撰寫視圖都是在 XML 檔案中去書寫，在 Jetpack Compose 中我們都用被加上 @Composable 注解的 kotlin 函式來構建界面，如下代碼所示
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
- 可組合函式的函式名一般首字母大寫，以便和普通函式區分，
- 可組合函式只能在其他可組合函式中呼叫，這一點有點類似協程 suspend 函式，
- 雖然函式用
@Composable注解，但 Jetpack Compose 并不是一個注入處理器，Compose 在 Kotlin 編譯器的型別檢測與代碼生成階段依賴 Kotlin 編譯器插件作業，此說法來自 深入詳解 Jetpack Compose | 實作原理 這篇文章中，感興趣可以去看一看，
學習第一個組件Text
上面創建的 Jetpack Compose 專案實體中就用到 Text 這個組件，在 Jetpack Compose 所有的組件都是 可以組合函式，所以Text 也不例外，原始碼如下
@Composable
fun Text(
text: String,//顯示的內容
modifier: Modifier = Modifier, // 關于布局的設定
color: Color = Color.Unspecified,// 文字顏色
fontSize: TextUnit = TextUnit.Unspecified,//文字大小
fontStyle: FontStyle? = null, //文字風格
fontWeight: FontWeight? = null,//文字粗細
fontFamily: FontFamily? = null, //字體風格
letterSpacing: TextUnit = TextUnit.Unspecified,//字間距
textDecoration: TextDecoration? = null,//文字裝飾、比如下劃線
textAlign: TextAlign? = null,//對齊方式
lineHeight: TextUnit = TextUnit.Unspecified,//行高
overflow: TextOverflow = TextOverflow.Clip,// 文字顯示不完的處理方式
softWrap: Boolean = true,// 文本是否應在換行符處中斷,對中文沒啥用
maxLines: Int = Int.MAX_VALUE,//最大行數
onTextLayout: (TextLayoutResult) -> Unit = {},
style: TextStyle = AmbientTextStyle.current
) {
……
}
我們需要設定個性化 Text 組件，只要傳入對應的引數就行了，和 XML 添加對應屬性差不多，
比如把文字改成藍色
@Composable
fun TestText(){
Text(text = "Hello Android",color= Color.Blue)
}
想看效果 就在setContent呼叫此函式，或者在預覽函式中呼叫
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
//將視圖添加到Acitivity
TestText()
}
}
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
TestText()
}
預覽效果
再學一個 Button 組件
@Composable
fun Button(
onClick: () -> Unit,// 按鈕的點擊事件
modifier: Modifier = Modifier,
enabled: Boolean = true, //是否啟用
interactionState: InteractionState = remember { InteractionState() },
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 組件點擊事件 onClick 和內容 content 是必填引數外，好像沒有設定 Button 文字的引數，這和我們以前在 XML 構建視圖不太一樣，那么我們怎么讓 Button 顯示文字呢？ 我們在content 添加一個Text組件就可以了，
@Composable
fun TestButton() {
Button(onClick = { }) {
Text(text = "button")
}
}
最后一個引數 content 是函式型別，為了讓這個函式體里面能呼叫可組合函式 所以在這個引數還加個 @Composable 表示是一個可以組合函式型別，所以 Button 的 content 的函式體中可以呼叫其它可組合函式，
如果我們讓Button顯示圖片，那么我們就把 Text 換成 Image 就行了，Jetpack Compose 給我提供了簡單Button、Text、Image 組件(組合函式) 通過我們不同的組合方式就創造了一些新的組件，
動態改變Text的文本內容
@Composable
fun TestButton() {
//宣告一個可變狀態值
val text =mutableStateOf("button")
Button(onClick = { text.value = "我被點擊了" /*改變值*/}) {
Text(text = text.value/*使用值*/)
}
}
我們宣告一個宣告一個可變狀態值text，讓 Text 的內容設定為
text.value當我們點擊按鈕的時候，text.value的值被改變 Jetpack Compose 就會幫我們重新渲染用到text.value的地方，
Jetpack Compose 的靈活性
Jetpack Compose 都是用 kotlin 函式，那么就可以用 kotlin 語法來構建界面了
@Composable
fun TestForView() {
val names = listOf("knight", "Tom", "Jack","kk")
Column {
names.forEach { Text(text = it) }
}
}
Column 是一種布局方式，讓子級垂直順序排列，這些子級我們現在直接用回圈語法就可以了
預覽效果
當然，如果條目多的話這樣寫就不合適了，我們可以把 Column 替換成 LazyColumn , LazyColumn 只會加載當前顯示的條目和 RecyclerView 類似，它的用法也很簡單，如下
val names = listOf("knight", "Tom", "Jack", "kk")
LazyColumn {
items(names) { Text(text = it) }
}
總結
本文敘述了如何搭建 Jetpack Compose 環境及工程，簡單了解了一下 Jetpack Compose 是什么樣子，學習了兩個組件 Text 和 Button ，也看到了 Jetpack Compose 在 kotlin 的加持下 如此的靈活，Jetpack Compose 作為 Android 新的界面工具包，功能還是挺豐富的，本文只能說和 Jetpack Compose 的初探，混個臉熟，關于什么是宣告式？、布局如何構建、界面狀態和資料如何處理等等，等以后我們在慢慢探討，
相關資料
本文配套的 Codelabs
Android 官方 Codelabs | Jetpack Compose basics
Android 官方網站 | Jetpack Compose 相關檔案
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/248633.html
標籤：其他
上一篇：Android萬字干貨！從簡歷準備到大廠真題，“金三銀四”跳槽大廠必備寶典！
下一篇：安卓開發學習——day4