Compose

Layouts

layout也就是布局啦，也就是组件的摆放位置。Column和Row我们已近有所了解，就是VerticalLinearLayout和HorizontalLinearLayout，Box这玩意之前没用过，其实Box就是FrameLayout。它允许你前后摆放。Box allows you to have items behind and/or in front of others.

我们可以用这些基础的布局组件来创建类似于这样的界面。

Modifiers

Modifiers allow you to decorate a composable. You can change its behavior, appearance, add information like accessibility labels, process user input or even add high-level interactions like making something clickable, scrollable, draggable or zoomable.

好像对于他的描述比较复杂哈。

我们可以使用Modifier修饰Composable，我们可以使用Modifier改变它的**behavior，外观(**这个感觉翻译的有点(扯)，添加信息，处理用户的输入，添加点击，滑动，拖动，缩放。

试手

@Composable
@Preview
fun SimplePhoto() {
    Row (modifier = Modifier.padding(start = 20.dp)){
        Surface(
            modifier = Modifier.size(50.dp),
            shape = CircleShape,
            color = MaterialTheme.colors.onSurface.copy(alpha = 0.2f)
        ) {
            Image(painter = painterResource(
                id = R.drawable.img_1),
                contentDescription = "这是一只皮卡丘",
                modifier = Modifier
                    .fillMaxSize(),

                )
        }
        Column {
            Text(text = "皮卡皮卡~",fontWeight = FontWeight.Bold)
            Text(text = "皮卡皮卡~",style = MaterialTheme.typography.body2)
        }
    }
}

Modifier的顺序

我们在hit code的时候通常会链式调用Modifier。

比如这样

Modifier.padding(start = 8.dp).align(Alignment.CenterVertically)).

那这种顺序会带来怎样的改变。

如果padding后click是这样的

Row (modifier = Modifier.padding(start = 20.dp).clickable {  }){
    Surface(
       ...
    ) {
        Image()
    }
    Column {
        Text()
        Text()
    }
}

click后padding

水波纹变大了呢。

如果在click之前加一个clip

Modifier(
    .padding(top = 20.dp, start = 20.dp)
    .clip(RoundedCornerShape(4.dp))
    .clickable { }
    .padding(all = 10.dp
    )

水波纹有了圆角。

Slot APIs

留空的API

非常常见的就是Button

你会发现一个非常奇怪的事情，这个Button没有内容。也就是说Button本身不绘制内容，Button把内容留了一个空，我们通过传入一个组合函数，然后Button显示我们传入的内容。这样很奇怪，但是好处也是很明显的，当然是灵活性和扩展性强啦。

发现后面的看不太懂了，那就自己去学一些实战的东西，之后再来学习。

实战

Text

textAlign

这个参数是决定text的位置的参数

6种对其方式，左右，start，end，center，justify

ConstrainLayout

暂时只是了解一下，因为现在暂时还是处于alph-05阶段，api不稳定。

Compose-5 8-28学习笔记