第AndroidJetpackCompose使用教程講解目錄概況開啟新工程文件結(jié)構(gòu)根結(jié)構(gòu)拆分方法官方四節(jié)課教程細(xì)節(jié)剖析dataclass組件代碼翻譯單例類適配器的替代品簡(jiǎn)單小動(dòng)畫

概況

compose摒棄了原生開發(fā)模式中的xml，代碼結(jié)構(gòu)類似于flutter

compose僅支持kotlin，雖然這玩意語(yǔ)法糖多但是也不難學(xué)

compose可以通過(guò)極短的代碼行數(shù)構(gòu)建完善頁(yè)面

開啟新工程

首先請(qǐng)去android官網(wǎng)下載androidstudio；

官網(wǎng)下載速度是正常的，別擔(dān)心；

之后根據(jù)提示安裝androidsdk以及ndk，如果必須的話你還可以裝一個(gè)模擬器；

把手機(jī)直接連接到電腦上就可以進(jìn)行真機(jī)調(diào)試了（記得把手機(jī)的調(diào)試模式打開）；

一切就緒，打開androidstudio，點(diǎn)擊file-new-newproject-emptycomposeactivity

稍等一會(huì)，工程很快構(gòu)建完畢

文件結(jié)構(gòu)

創(chuàng)建新工程后，默認(rèn)會(huì)打開MainActivity.kt文件，這是我們的主頁(yè)面

根結(jié)構(gòu)

classMainActivity2:ComponentActivity(){

overridefunonCreate(savedInstanceState:Bundle){

super.onCreate(savedInstanceState)

setContent{

ComposeDemoTheme{

//Asurfacecontainerusingthe'background'colorfromthetheme

Surface(

modifier=Modifier.fillMaxSize(),

color=MaterialTheme.colors.background

Greeting("Android")

}

setContent在這里寫入頁(yè)面內(nèi)容，通過(guò)一個(gè)個(gè)組件逐步構(gòu)造

ComposeDemoTheme表示根據(jù)默認(rèn)主題包中的內(nèi)容進(jìn)行設(shè)置（默認(rèn)主題包就在和mainactivity同級(jí)別的themes文件夾）

Surface構(gòu)建頁(yè)面表面的一個(gè)組件

拆分方法

為了避免組件過(guò)度嵌套導(dǎo)致產(chǎn)生死亡三角，務(wù)必記得把必要的組件拆出來(lái)作為一個(gè)單獨(dú)的方法寫！

方法寫在本activity的class內(nèi)部，那么同文件夾內(nèi)的其他kotlin文件的方法都不會(huì)沖突；

若寫在class外（默認(rèn)），則不同文件夾將可能會(huì)發(fā)生名稱重復(fù)的沖突；

@Composable

funGreeting(name:String){

Text(text="Hello$name!")

加了@Composable注解的方法，表示這是一個(gè)組件，該注解必須添加！

該組件方法內(nèi)使用了text

@Preview(showBackground=true)

@Composable

funDefaultPreview(){

ComposeDemoTheme{

Greeting("Android")

compose內(nèi)置了一個(gè)臨時(shí)預(yù)覽機(jī)制，即preview；

加了@Preview注解的代碼表示該代碼將作為臨時(shí)預(yù)覽而展示；

臨時(shí)預(yù)覽的方法不會(huì)對(duì)最終編譯生成的結(jié)果產(chǎn)生任何影響?。?！

點(diǎn)擊代碼框右上角的split，即可拆分為代碼+預(yù)覽布局

一切就緒后點(diǎn)擊build，即可渲染預(yù)覽頁(yè)面

官方四節(jié)課教程細(xì)節(jié)剖析

官方教程地址：/jetpack/compose/tutorial

dataclass

dataclass類似于typescript的interface，可以理解為定義了一個(gè)對(duì)象；

msg:Message直接將Message作為一個(gè)類型來(lái)使用；

之后直接在setContent里面調(diào)用組件即可！

classMainActivity:ComponentActivity(){

overridefunonCreate(savedInstanceState:Bundle){

super.onCreate(savedInstanceState)

setContent{

MessageCard(Message("Android","JetpackCompose"))

dataclassMessage(valauthor:String,valbody:String)

@Composable

funMessageCard(msg:Message){

Text(text=msg.author)

Text(text=msg.body)

}

組件代碼翻譯

@Composable

funMessageCard(msg:Message){

//使用padding內(nèi)部撐開，all表示四周撐開

Row(modifier=Modifier.padding(all=8.dp)){

Image(

painter=painterResource(R.file_picture),

contentDescription="Contactprofilepicture",

modifier=Modifier

//設(shè)置該組件的大小為40dp

.size(40.dp)

//把圖片變成圓形的

.clip(CircleShape)

//在image和column之間添加一個(gè)水平空格！

Spacer(modifier=Modifier.width(8.dp))

Column{

Text(text=msg.author)

//這里添加的是一個(gè)垂直空格！

Spacer(modifier=Modifier.height(4.dp))

Text(text=msg.body)

}

單例類

教程中我們用到了SampleData，然而由于外網(wǎng)無(wú)法訪問(wèn)，數(shù)據(jù)集自然下載不了，但是我們可以簡(jiǎn)單的模擬一個(gè)數(shù)據(jù)集：

object創(chuàng)建單例類；

listOf模擬列表！

objectSampleData{

valconversationData=listOf(

Message(

"jack",

"testname"

Message(

"fakeman",

"idaofihoeqhiodhoehfqow"+

"ehfsdlahfioehfowhfldsahlfhoqeihfo"+

"hodhsafohewqgjlfjdsnvc,mxbgkjwfhw"+

"hoehfsdhfkwejashdhasjhdqwooiadhfoiha"+

"oidosiawqijiojagakfjkladfijslkfh"+

"lwkehflkadshflahfioewhfoadshlfhsa"

}

適配器的替代品

//by表示使用委托，設(shè)置一個(gè)針對(duì)于本compose的全局狀態(tài)

//可以理解為isExpanded是一個(gè)全局變量！

varisExpandedbyremember{mutableStateOf(false)}

//clickable設(shè)置column中項(xiàng)目是否可以點(diǎn)擊，以及點(diǎn)擊后執(zhí)行的代碼

//代碼和vue類似，點(diǎn)一下就反轉(zhuǎn)一下，達(dá)到開啟和收回的效果

Column(modifier=Modifier.clickable{isExpanded=!isExpanded}){

Surface(

shape=MaterialTheme.shapes.medium,

elevation=1.dp,

Text(

text=msg.body,

modifier=Modifier.padding(all=4.dp),

//判斷全局狀態(tài)isExpanded值

//如果isExpanded為true，那么顯示所有行（即展開）

//如果isExpanded為false，那么僅顯示一行（即收縮）

maxLines=if(isExpanded)Int.MAX_VALUEelse1,

style=MaterialTheme.typogra