你好，我是朱濤。這是「沉思錄」的第四篇文章。
最近工作有點忙的，趁着端午節 3 天小長假，我來寫個 Compose 快速入門的教程吧！我們的目標是：「2 小時入門 Compose」！
1怎麼學？學習 Compose 最快的方式是什麼？當然是寫代碼呀！可是，Google 官方給出的開源項目太複雜了，初學者看了就頭疼。我舉個例子，Google 官方最簡單的教學 App：Jetsnack，都有將近 5000 行代碼，這怎能不讓人望而卻步？
因此，我們需要找一個更簡單的項目，代碼量還要再小一點。我個人比較喜歡 Google 官方的架構案例：TodoApp，它的功能足夠簡單，也比較貼近我們的實際生活。
不過，可惜的是，這個官方倉庫並沒有完整的 Compose 實現，GitHub 上面類似的實現又太複雜了。怎麼辦呢？那我就仿着它來寫一個吧。Logo 資源什麼的，我也給扒過來了。
開始吧！
2To Do App整個項目的代碼我已經寫完了，它的結構非常簡單，一共就只有三個頁面：
整個工程的代碼量，我統計了一下，只有 1400 多行。
對於一個功能完整的 App，這樣的代碼量已經算上很小的了，想想我們工作中的一個 Presenter 代碼量都不止 1400 行代碼吧？
到這裡，你會不會覺得，這個代碼量實在太小了呢？這 App 會不會是個 Hello World 級別的呢？讓我來帶你看看它的功能。
3工程介紹總的來說，核心的 UI 只有這麼幾個文件：
4開屏頁面其中，最簡單的，就是 Splash 頁面，它的作用只有一個：展示 Logo，接着等待一小會，進入首頁。在這裡，我們會實現一個動畫。
這個動畫分為兩個部分：Logo 的「透明度」動畫，還有文字的「透明度」+「位移」動畫。
5首頁接着，我們來看看首頁的功能，它會展示當前所有的任務和狀態。
這裡，我寫了一個進場動效，這個在 Compose 當中實現起來真沒什麼難度。
總的來說，就是：Index 越大的 Item，它的初始位移越大，進場的時候，再把所有 Item 挪回原處即可。
拖拽刪除然後，我還實現了一下拖拽刪除功能。
拖拽刪除本身沒什麼難度，不過，在拖拽的過程中，做一些其他的事情，還是比較有意思的。這裡有兩個細節：
以上這兩個細節，我也會在後面的博客詳細介紹。
6任務詳情頁面詳情頁，這個頁面反而沒什麼特殊東西，就是兩個輸入框，分別是：任務標題、任務詳情，還有一個 CheckBox，代表任務是否已經完成。
這裡的輸入框的動畫效果，是 TextField 自帶的，也不需要我們自己實現，雖然有點丑，但也能用了。
7Splash 代碼OK，工程介紹完了，我們就可以上代碼了！這篇文章，我們先從最簡單的 Splash 頁面開始吧！
@ComposablefunSplash(offsetState:Dp,alphaState:Float){//1Box(modifier=Modifier.fillMaxSize().background(MaterialTheme.colors.splashBackground),contentAlignment=Alignment.Center){//2Column(horizontalAlignment=Alignment.CenterHorizontally){//3Image(modifier=Modifier.size(LOGO_HEIGHT).alpha(alpha=alphaState),painter=painterResource(id=getLogo()),contentDescription=stringResource(id=R.string.to_do_logo))//4Text(modifier=Modifier.offset(y=offsetState).alpha(alpha=alphaState),text=stringResource(id=R.string.app_name),color=MaterialTheme.colors.splashText,style=MaterialTheme.typography.h5,fontWeight=FontWeight.Bold,maxLines=1,)}}}整個 Splash 的 UI 元素其實很簡單，我標記了 4 個注釋，我們一起看看：
OK，UI 元素寫出來了，動畫怎麼搞？
@ComposablefunSplash(gotoHomeScreen:()->Unit){//1varstartbyremember{mutableStateOf(false)}//2valoffsetbyanimateDpAsState(targetValue=if(start)0.dpelse100.dp,animationSpec=tween(durationMillis=1000))valalphabyanimateFloatAsState(targetValue=if(start)1felse0f,animationSpec=tween(durationMillis=2000))//3LaunchedEffect(key1=Unit){start=truedelay(SPLASH_DELAY)gotoHomeScreen()}Splash(offsetState=offset,alphaState=alpha)}其實，動畫也很簡單，我們通過注釋來看：
最終的效果就是這樣的：
8結束語恭喜你，你已經完成了一個 Compose 頁面！
考慮到篇幅限制，首頁、詳情頁，我們留到後面的博客再講具體代碼實現吧。
關於源代碼，後續我會在我的公眾號「朱濤的自習室」放出來，敬請關注。
對了，最近有讀者私信跟我說：經常收不到公眾號的更新推送。我研究了一下，像我這種一個月不更新一次的「辣雞」號，權重是很低的，貌似要「設為星標」才能保證收到推送。
OK，感謝你的閱讀，在看+轉發+評論，請安排上吧！咱們下期再見吧！
留言列表