Compose基础入门

Compose基础入门

本文链接:https://blog.youkuaiyun.com/feather_wch/article/details/132139415

Compose项目配置开关


app的build.gradle

android {
   
   

    buildFeatures {
   
   
        compose true // compose
    }
    composeOptions {
   
   
        kotlinCompilerExtensionVersion '1.3.2' //编译时注解
    }
}

dependencies {
   
   

// Compose相关
    implementation 'androidx.activity:activity-compose:1.5.1'
    implementation platform('androidx.compose:compose-bom:2022.10.00')
    implementation 'androidx.compose.ui:ui'
    implementation 'androidx.compose.ui:ui-graphics'
    implementation 'androidx.compose.ui:ui-tooling-preview'
    implementation 'androidx.compose.material3:material3'
    implementation 'androidx.compose.material3:material3'

    androidTestImplementation platform('androidx.compose:compose-bom:2022.10.00')
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
    debugImplementation 'androidx.compose.ui:ui-tooling'
    debugImplementation 'androidx.compose.ui:ui-test-manifest'
}

ComponentActivity中通过setContent方法达到以前setContentView的效果

class MainActivity : ComponentActivity() {
   
   
    override fun onCreate(savedInstanceState: Bundle?) {
   
   
        super.onCreate(savedInstanceState)

        setContent {
   
   
            // xxx
        }
    }
}
// 
androidx.activity:activity-compose:1.5.1@aar
--ComponentActivity.kt
    ->ComponentActivity.setContent

Compose是什么?

1、为什么要用Compose?

  1. 声明式的UI框架
  2. 组合替换继承

2、为什么使用组合?

  1. 组合获得布局能力
  2. 粒度更细,更灵活
  3. 可以解决Java中单个父类的限制

3、Compose和View、ViewGroup的区别:

  1. Compose不存在多层绘制问题

4、Compose是如何实现的?

  1. 会形成ComposeUiNode和LayoutNode等各种节点
  2. text等微件对应于LayoutNode和Node组成树形结构

5、还需要Fragment吗?

不需要了,单个Activity可以搞定一切

6、微件相对无状态,不再提供getter和setter方法

State状态管理

1、remember和mutableStateOf

  1. 数据驱动ui
  2. 数据就需要有状态 => MutableStateOf

2、为什么需要remember+mutableStateOf(“”) 才会改变输入框的数据?

  1. 一起管理状态
  2. mutableStateOf 是 Compose 中的一个函数,用于创建可变的状态。它接受一个初始值,并返回一个包装了该值的 MutableState 对象。MutableState 对象可以在 Composable 函数中读取和更改,而且当其值发生变化时,Compose 会自动进行重新绘制。
  3. remember 是 Compose 中的一个函数,用于在 Composable 函数中记住一个值。它类似于常规 Android 中的 savedInstanceState,但它是为 Compose 中的状态管理而设计的。

3、写一个复选框

    @Composable
    fun MyCheckBox(){
   
   
        var checked by remember{
   
   
            mutableStateOf(false)
        }
        Checkbox(checked = checked, onCheckedChange = {
   
   
            checked = it
        })
    }

3、remember内部是cache,get/put,相当于hashmap

实时预览 动画执行

Preview预览:

@Preview(showBackground = true, showSystemUi = true)

Compose和View/ViewGroup的关联😁

setContentView的原理是什么?

  1. 从DecorView中获取到ContentView,并设置进去
  2. DecorView由ContentView和TitleView组成

Compose中的contentview

  1. contentview就是ComposeView,内部会加载我们实现的部分AndoridComposeView(多套了一层壳)
  2. 根节点是layoutnode,其他微件都是该树的节点
  3. compose是国中国,有自己的绘制流程

LazyColumn和RecyclerView区别

  1. RV从缓存拿数据可以不create view,直接bind view

  2. LazyColumn:状态管理,每次都会新建,走一遍流程。会根据当前状态去描绘UI

  3. 不再需要适配器:LazyColumn

改属性,改xx

compose搭建app就一个activity结构最好。androudcomposeview就一个。

Box 帧布局 FrameLayout

内置函数

remmember


属性

所有属性都会转为xxxModify

Modify

// SizeModifier = Modifier.size(10.dp, 10.dp)
// 每个Text、Image都会转为 一个LayoutNode
// 链式加入到
SizeModifier 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

猎羽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值