Compose基础代码

基础用法1

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
           MessageType("普通调用")//在模拟器上调用
        }
    }

    @Composable
    private fun MessageType(s: String) {
        Text(text = "$s 模式")
    }
    
    @Preview//在预览模式下调用传参
    @Composable
    fun PreviewMessageType(){
        MessageType(s = "进入预览")
    }
}

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

@Composable
    private fun MessageType(s: MessageBean) {
        Row() {//如果没有Row，图片和文本会重叠在一起
            Image(
                painter = painterResource(id = R.mipmap.iv_city),
                contentDescription = null)//contentDescription无障碍模式，残障人士看不到，只能通过听的方式
            Column() {
                Text(text = "${s.title}")
                Text(text = "${s.content}")
            }
        }
    }

 @Composable
    private fun MessageType(s: MessageBean) {
        Row(modifier = Modifier.padding(all = 15.dp)) {
            Image(
                painter = painterResource(id = R.mipmap.iv_city),
                contentDescription = null,//contentDescription无障碍模式，残障人士看不到，只能通过听的方式
                modifier = Modifier
                    .size(40.dp, 60.dp)//图片的大小尺寸。
                    .clip(CircleShape)//图片设置成圆形
            )
            Column() {
                Text(text = "${s.title}")
                Spacer(modifier = Modifier.height(5.dp))//给两行文字添加边距。
                Text(text = "${s.content}")
            }
        }
    }

setContent {

            ComposeDemoTheme() {//系统自动创建的主题，命名是项目名字+Theme命名,引入主题
                MessageType(MessageBean("这是内容","这是标题"))
            }
        }
    
          @Composable
    private fun MessageType(s: MessageBean) {
        Row(modifier = Modifier
            .padding(all = 15.dp)
            .background(MaterialTheme.colors.background)//调用主题的background，想要生效必须得引入主题
        ) {
            ...
    }

列表和动画

 @Composable
    fun ShowList(msgList : List<MessageBean>){
        LazyColumn(){
            items(msgList){msgItem ->
                MessageType(msgItem)

            }
        }
    }
    
    
    @Composable
    private fun MessageType(s: MessageBean) {
        Row(modifier = Modifier
            .padding(all = 15.dp)
            .background(MaterialTheme.colors.background)//调用主题的background，想要生效必须得引入主题
        ) {
            Image(
                painter = painterResource(id = R.mipmap.iv_city),
                contentDescription = null,//contentDescription无障碍模式，残障人士看不到，只能通过听的方式
                modifier = Modifier
                    .size(40.dp, 60.dp)
                    .clip(CircleShape)
            )
            Spacer(modifier = Modifier.width(5.dp))//增加横向间距
            var isExpended by remember {//remember存储状态
                mutableStateOf(false)
            }
            Column(
                modifier = Modifier.clickable { isExpended = !isExpended }//点击事件
            ) {
                Text(text = "${s.title}",
                    color = MaterialTheme.colors.secondaryVariant
                )
                Spacer(modifier = Modifier.height(5.dp))
                Text(text = "${s.content}",
                    style = MaterialTheme.typography.body2,
                    maxLines = if (isExpended) Int.MAX_VALUE else 1,
                    modifier = Modifier.padding(5.dp)

                )
            }
        }
    }
    

约束布局

• 引用是使用createRefs()或createRefFor()创建的，ConstraintLayout中的每个可组合项都需要有与之关联的引用。
• 约束条件是使用constrainAs()修饰符提供的，该修饰符将引用作为参数，可让您在主体lambda中指定约束条件。
• 约束条件是使用linkTo()或其他有用的方法指定的。
• parent是一个现有的引用，可用于指定对ConstraintLayout可组合项本身的约束条件。