android——jetpack Compose布局居中,margin,padding,文字居中-Toy模板网

这篇具有很好参考价值的文章主要介绍了android——jetpack Compose布局居中,margin,padding,文字居中。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

水平布局Row

Row(modifier = Modifier.fillMaxWidth(),            
    horizontalArrangement = Arrangement.Center,//设置水平居中对齐
    verticalAlignment =  Alignment.CenterVertically//设置垂直居中对齐
    ) {
        Text(text = "text控件")
        Text(text = "text控件")
    }

需要注意"Arrangement"和"Alignment"的区别

垂直布局Column 进行水平居中

Column(Modifier.fillMaxWidth()) {
        Text(text = "text控件",modifier = Modifier.align(alignment = Alignment.CenterHorizontally))
        Text(text = "text控件",modifier = Modifier.align(alignment = Alignment.CenterHorizontally))
    }

直接在控件中进行居中展示

Compose UI 的 margin 和 padding

 Row(modifier = Modifier.fillMaxWidth(),verticalAlignment = Alignment.CenterVertically) {
		Text(text = "text控件",modifier = Modifier
		.padding(start = 15.dp, top = 18.dp, end = 15.dp, bottom = 18.dp)
		.fillMaxWidth()
		.padding(start = 15.dp))
}

Text控件中的modifier属性中有两个padding,第一个padding就属于margin,第二个就是对应原来写法的内padding,需要margin的话需要写在最前面

填充文字居中

在 Text 控件中有对应的宽高背景,文字需要居中,有对应的TextAlign属性使用,但是属性只能进行水平方向的居中无法实现android:gravity="center"的效果

对应的实现方式,重点在对应的第二个padding,进行内填充(参考第一段代码),或者在采用其他的方式,比如Box控件中,给box控件进行宽高背景的设定使用contentAlignment = Alignment.Center进行居中(参考第二段代码)

第一段代码

Text(
            text = "Available coupon", color = Color(0xFFFFFFFF),
            textAlign = TextAlign.Center,
            modifier = Modifier
                .width(165.dp)
                .padding(start = 15.dp, end = 10.dp)
                .clip(RoundedCornerShape(20.dp))
                .background(color = bg1)
                .padding(10.dp)
                .clickable(
                    onClick = {
                        //点击事件
                    },
                    //下面两行是点击出现水波纹的去除
                    indication = null,
                    interactionSource = remember {
                        MutableInteractionSource()
                    })
        )

第二段代码文章来源地址https://www.toymoban.com/news/detail-601154.html

Box(modifier = Modifier.height(40.dp).width(165.dp)
                .padding(start = 15.dp, end = 10.dp)
                .clip(RoundedCornerShape(20.dp))
                .background(color = bg1), 
                contentAlignment = Alignment.Center) {
       Text(
            text = "Available coupon", color = Color(0xFFFFFFFF),
            textAlign = TextAlign.Center,
            modifier = Modifier
                .clickable(
                    onClick = {
                    	//点击事件
                    },
                    //下面两行是点击出现水波纹的去除
                    indication = null,
                    interactionSource = remember {
                        MutableInteractionSource()
                    })
        )

}