Compose 组件使用记录

1 Text

Text(text = "微信登陆，即可获得新人提现额度！",
    fontSize = 14.sp,
    fontStyle = FontStyle.Normal,
    fontWeight = FontWeight.Bold,
    color = Color(0xFFE3A149)
)

2 Image

Image(
    painter = painterResource(id = R.mipmap.mine_wechat_logo),
    contentDescription = null,
    modifier = Modifier
        .size(92.dp, height = 73.dp)
        .padding(top = 30.dp)
)

3 ConstraintLayout

ConstraintLayout(modifier = Modifier.padding(top = 23.dp)) {
    val (text,anim) = createRefs()
    Text(text = "微信登录",
        fontWeight = FontWeight.Bold,
        textAlign = TextAlign.Center,
        color = Color.White,
        modifier = Modifier
            .size(width = 212.dp, height = 50.dp)
                //设置圆角
            .background(
                color = Color(0xFF06BF5E),
                shape = RoundedCornerShape(19.dp, 19.dp, 19.dp, 19.dp)
            )
            .constrainAs(text) {
                start.linkTo(parent.start)
                end.linkTo(parent.end)
                top.linkTo(parent.top)
            }
    )
    lottieAnimView(modifier = Modifier
        .padding(top = 30.dp)
        .constrainAs(anim) {
            top.linkTo(text.top)
            end.linkTo(text.end)
        })
}

4 LottieAnimation

@Composable
fun lottieAnimView(modifier: Modifier){
    val composition by rememberLottieComposition(
        LottieCompositionSpec.Asset("main_gold_hand/main_gold_hand.json"),
        imageAssetsFolder  = "main_gold_hand/images"
    )
    val progress by animateLottieCompositionAsState(
        composition,
        //设置无限循环
        iterations =  LottieConstants.IterateForever
    )
    LottieAnimation(
        composition = composition,
        progress = progress,
        modifier = modifier.size(60.dp)
    )
}

5 设置背景渐变

.background(
    brush = Brush.verticalGradient(
        0.0f to Color(0xFFFFFEFB),
        1f to Color(0xFFFFF2DB)
    ),
    shape = RoundedCornerShape(20.dp)
)

6 box

Box(
    modifier = Modifier
        .fillMaxWidth()
        .padding(top = 30.dp)
        //设置图片背景
        .paint(painterResource(id = R.mipmap.mine_btn_bg))
        .size(width = 277.dp, height = 56.dp),
    contentAlignment = Alignment.Center
)