Android 我的第一个Jetpack Compose应用

目录

1. 背景

2. Jetpack Compose 是什么?

3. 开始前的准备

4. 创建DEMO

4.1 New Project

4.2 项目配置

5. 项目整体变化

5.1 布局部分

5.2 依赖的变化

5.3 包体大小的变化

5.4 代码编写的变化

6. 遇到的问题

6.1 EditText 数据不会变化

6.2 导入其他人写的一个项目,在mumu模拟器报错 "Snapshot is not open"

7. 资料


1. 背景

    最近看了很多郭神公众号推荐的jetpack Compose博文,耐不住好奇心的我果断去创建了一个Demo,测试一下如何。

2. Jetpack Compose 是什么?

    Jetpack Compose 是用于构建原生界面的新款 Android 工具包。它可简化并加快 Android 上的界面开发。使用更少的代码、强大的工具和直观的 Kotlin API,快速让应用生动而精彩。UI代码和预览如下图所示:

3. 开始前的准备

    说一千道一万,不如自己动手试一下,使用之前 还有条件

    3.1 需要重新 配置一下 新的 AndroidStudio,必须使用新版本 金丝雀版本的AndroidStudio,必须区分开来才行

    3.2 必须使用kotlin语言,不支持Java语言

4. 创建DEMO

4.1 New Project

    必须选择 Empty Compose Activity

 

4.2 项目配置

    看到语言只支持Kotlin,而且最低版本要在 5.0以上才行。

5. 项目整体变化

5.1 布局部分

左侧的Layout文件夹已经不存在了,中间就是代码部分,右侧是代码布局预览,值得一提的是,现在Jetpack Compose还并不完善,预览的话还得添加一个 @Preview才行。

5.2 依赖的变化

    Project.buildGradle

    

    App.BuildGradle

    

5.3 包体大小的变化

    这么多依赖下来,包体整体增加了6m左右,不过随着手机的更新换代,app性能的提升完全能够盖过包体大小的影响。

5.4 代码编写的变化

    可以看到 setContentView没有了,取而代之的是使用代码生成布局。以前使用xml形式是方便我们观察布局的排列变化,如果使用代码编写也能达到这种效果,使用代码性能肯定会比加载xml文件的要高。唯一麻烦的是我们需要一定事件去适应这种方式,毕竟老的xml布局都写了那么些年了,突然的改变肯定会有不适应,而且还需要去学习一下Kotlin,如果之前没开发过。

6. 遇到的问题

6.1 EditText 数据不会变化

    我之前是这么写的,发现输入时日志有打印,但是EditText却没有展示。

package com.example.myapplication

import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    Greeting("Android")
                    EditText()
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyApplicationTheme {
        Greeting("Android")
    }
}

@Preview(showBackground = true)
@Composable
private fun EditText() {
    var text11: String by mutableStateOf("")
    Box(
        modifier = Modifier
            .size(300.dp, 120.dp),
        contentAlignment = Alignment.Center
    ) {
        Log.e("lbs", "EditText222  ")
        TextField(

            modifier = Modifier
                .size(200.dp, 60.dp),
            onValueChange = {
                Log.e("lbs", "EditText222 $it ")
                text11 = it
            },
            value = text11,
            label = { Text("Countdown Seconds") },
            maxLines = 1,
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text)
        )
    }
}

    后来发现不太对,需要将 var text11: String by mutableStateOf("") 提到全局才行,否则应该是每次进来都是新的。这种方式比较像数据驱动试图改变的形式,有点数据绑定的意思,跟VUE还有点像。

6.2 导入其他人写的一个项目,在mumu模拟器报错 "Snapshot is not open"

   不知道为啥回去验证这个功能,我看了下代码也没有地方用到啊,还有待研究。不过安装在手机上没有问题,应该是模拟器没有相机的问题。

03-22 19:48:39.751 1714-1714/com.example.androiddevchallenge E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.example.androiddevchallenge, PID: 1714
    java.lang.IllegalStateException: Snapshot is not open
        at androidx.compose.runtime.snapshots.SnapshotKt.validateOpen(Snapshot.kt:1457)
        at androidx.compose.runtime.snapshots.SnapshotKt.access$validateOpen(Snapshot.kt:1)
        at androidx.compose.runtime.snapshots.MutableSnapshot.apply(Snapshot.kt:584)
        at androidx.compose.runtime.Recomposer.applyAndCheck(Recomposer.kt:759)
        at androidx.compose.runtime.Recomposer.access$applyAndCheck(Recomposer.kt:100)
        at androidx.compose.runtime.Recomposer.performRecompose(Recomposer.kt:1003)
        at androidx.compose.runtime.Recomposer.access$performRecompose(Recomposer.kt:100)
        at androidx.compose.runtime.Recomposer$runRecomposeAndApplyChanges$2$2.invoke(Recomposer.kt:437)
        at androidx.compose.runtime.Recomposer$runRecomposeAndApplyChanges$2$2.invoke(Recomposer.kt:411)
        at androidx.compose.ui.platform.AndroidUiFrameClock$withFrameNanos$2$callback$1.doFrame(AndroidUiFrameClock.android.kt:34)
        at androidx.compose.ui.platform.AndroidUiDispatcher.performFrameDispatch(AndroidUiDispatcher.android.kt:112)
        at androidx.compose.ui.platform.AndroidUiDispatcher.access$performFrameDispatch(AndroidUiDispatcher.android.kt:43)
        at androidx.compose.ui.platform.AndroidUiDispatcher$dispatchCallback$1.doFrame(AndroidUiDispatcher.android.kt:72)
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:856)
        at android.view.Choreographer.doCallbacks(Choreographer.java:670)
        at android.view.Choreographer.doFrame(Choreographer.java:603)
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:844)
        at android.os.Handler.handleCallback(Handler.java:739)
        at android.os.Handler.dispatchMessage(Handler.java:95)
        at android.os.Looper.loop(Looper.java:148)
        at android.app.ActivityThread.main(ActivityThread.java:5539)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:745)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:635)

7. 资料

    Jetpack Compose 使用入门: https://developer.android.google.cn/jetpack/compose/documentation?authuser=0

    使用Jetpack Compose编写一个倒计时器 https://mp.weixin.qq.com/s/KXhtNwZh_e10toKI6HDQkg

    Jetpack结合MVVM可以开发出一个多优秀的APP? https://mp.weixin.qq.com/s/VNVy55SehYWlEjMVnIZ39w

 

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值