2022.9.4 Compose布局初识

2022-09-03

Compose布局初识

1.布局

在Compose中,您可以通过从可组合函数中调用其他可组合函数来构建界面层次结构。

1.1 Column

使用Column垂直排列元素,使用Row水平排列项,使用Box堆叠元素。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MessageCard(Message("Kurogi","哲学"))
        }
    }
}

@Composable
fun MessageCard(msg: Message){
    Column{
        Text(text = msg.author)
        Text(text = msg.body)
    }
}

@Preview
@Composable
fun PreviewMessageCard(){

}

data class Message(val author: String,val body: String)

Column效果

1.2 Row

@Composable
fun MessageCard(msg: Message){
    Row{
        Text(text = msg.author)
        Text(text = msg.body)
    }
}

Row效果

在字的旁边放一张图片

@Composable
fun MessageCard(msg: Message){
    Row{
        Image(painter = painterResource(id = R.drawable.img_1),
            contentDescription = null)
        Column{
            Text(text = msg.author)
            Text(text = msg.body)
        }
    }
}

2.配置布局

为了装饰或者配置可组合项,Compose使用了修饰符。通过修饰符,可以更改可组合项的大小、布局、外观,还可以添加高级互动,例如使元素可点击。可以将这些修饰符链接起来,以创建更丰富的可组合项。

@Composable
fun MessageCard(msg: Message){
    Row(modifier = Modifier.padding(all = 8.dp)){
        Image(painter = painterResource(id = R.drawable.img_1),
            contentDescription = null,
            modifier = Modifier
                .clip(CircleShape)      //把图片显示方式变成圆形
                .size(40.dp)        //修改图片大小
        )
        Column{
            Text(text = msg.author)
            Spacer(modifier = Modifier.height(4.dp))    //修改间距
            Text(text = msg.body)
        }
    }
}