Compose基础学习指南

关于控件

与xml不同的是，compose的组件直接将UI界面和逻辑层组合了起来。 以简单的button控件为例，compose的代码如下：

@Composable
@Preview
fun ButtonDemo(){
   Button(onClick = {})}{
      Text("Click")
   }
}

轻轻松松的几行代码即可显示出一个控件

 如果需要调用资源，也非常的容易 比如调用一个资源里的图片并用Image控件显示

@Composable
@Preview
fun imageDemo(){
   Image(
      painter = painterResource(R.drawable.jetpack_comnpose)
      contentDescription = null//强化用户体验
   )
}

 这里介绍一个animation，animation是一个用于创建动画的函数，可以用来实现UI中的动态效果和过渡，我是新手，我觉得这个控件还是蛮有意思的。 举个栗子

@Preview
@Composable
fun AnimationDemo(){
   var visible by remember{mutableStateOf(false)}//首先定义一个visible，在里面记忆一个状态，状态是compose里面一个比较重要的概念，这里记忆的状态
   Button(onClick = { visible =! visible}){
      if(visible){
         Text("Hide")
      }else{
         Text("Show")
      }
   }
   AnimatedVisiblity(visible){
      Text("Hello")
   }
                                                
}

 这时候hello从左上角飞下来了，因为我们没有提前设置布局 compose提供了三种布局：Box Column（垂直排列的线性布局） Row（水平排列的线性布局）column和row比较好理解，以Column为例，在刚刚书写的代码上添加一个Column布局

是不是很有意思，它从垂直方向往下移动了，我觉得挺有意思的。

Row布局也有一个栗子：

fun Counter() {
    var count by remember { mutableStateOf(0) }
    Row {
        Button(onClick = { count += 1 }) {
            Text("+")
        }
        Text(
            text = "$count", fontSize = 24.sp, modifier = Modifier.padding(8.dp)
        )
        Button(onClick = { count -= 1 }) {
            Text("-")
        }
    }
}

 

通过按钮，我们可以改变中间的值。

值得注意的是，这里的count不能直接定义为var count = 0 因为在jetpack中，count变量是普通的变量，不是可组合状态（compose state），所以click发生变化的时候UI并不会重新计算，而state是一种用于可变数据的数据类型，可以体现UI的变化，所以运用compose组件的时候，我们一般用状态存储变量

这里还有一个Box布局，它类似一个绝对定位的布局方式，可以自由地放置子组件并控制它们的位置和大小，可以使用Modifier属性来控制子组件的位置和大小。

Column和LazyColumn的区别：Column是静态的，LazyColumn是动态的。比如10条信息，Column一下子就完全加载了，但是LazyColumn会在滚动的时候动态加载。

一些基础知识如上，别的问题欢迎留言，一起讨论。