Android Compose 控件基本属性

本文的代码由上一篇文章的Demo进一步书写完成,

以下代码分别列举了控件的:

内边距,外边距,内容居中,渐变自定义边框,宽度权重,string资源引用等定义方式

MainActivity:

Kotlin 复制代码

open class MainActivity : ComponentActivity() {

    private val TAG = "MainActivity"
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            Column {    //竖向布局
                var newText by remember { mutableStateOf("默认") }
                NewText(
                    newText, modifier = Modifier
                        .background(Color.Green)
                        .padding(20.dp)
                )
                var fieldText by remember { mutableStateOf("") }
                NewTextField(fieldText, "随便输入点什么吧") {
                    //输入监听事件
                    Log.e(TAG, "输入内容:$it")
                    fieldText = it
                    newText = it
                }
                NewButton("清空按钮") {
                    //点击事件
                    newText = ""
                    fieldText = ""
                }
                NewButton("跳转") {
                    //点击事件
                    startActivity(Intent(this@MainActivity, NewActivity::class.java))
                }

            }
        }
    }

    @Composable
    fun NewText(name: String, modifier: Modifier = Modifier) {
        Text(
            text = name,
            modifier = modifier,
            textAlign = TextAlign.Center, //文字居中
            style = TextStyle(//文本的风格配置
                fontFamily = FontFamily.Default, //文本的字体
                fontSize = 15.sp,//字体大小
                fontWeight = FontWeight.Bold,//文本的粗细
                fontStyle = FontStyle.Italic,//斜体
                color = Color.Red,//文本颜色
                textDecoration = TextDecoration.Underline//删除线
            )
        )
    }

    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun NewTextField(text: String, hint: String, onValueChange: (String) -> Unit) {

        TextField(
            value = text,
            placeholder = {
                Text(text = hint)
            },
            onValueChange = {
                // 另一种事件赋值的写法，这种写法可以在这里增加额外代码
                onValueChange(it)
            }
        )
    }

    @Composable
    fun NewButton(name: String, onClick: () -> Unit) {
        Button(
            onClick = onClick,
            modifier = Modifier
                .padding(10.dp)
        ) {
            Text(
                text = name
            )

        }
    }

}

NewActivity:

Kotlin 复制代码

class NewActivity : MainActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val colors = listOf(Color(0xFF005599), Color(0xFF3FFFED))
        setContent {
            Column {    //竖向布局
                var newText by remember { mutableStateOf("默认-NewActivity") }
                NewText(
                    newText, modifier = Modifier
                        .background(Color(0xFFffff99))
                        .padding(30.dp)
                        .fillMaxWidth(1f)
                        .border(
                            //设置渐变边框   粗细与边框渐变色
                            border = BorderStroke(1.dp, Brush.linearGradient(colors)),
                            shape = RoundedCornerShape(0.dp, 0.dp, 5.dp, 5.dp), //圆角形状
                        )
                )
                NewText(
                    newText, modifier = Modifier
                        .padding(20.dp)
                        .background(Color(0xFFff9999))
                        .padding(30.dp)
                        .fillMaxWidth(0.4f)
                        .border(  //设置渐变边框
                            border = BorderStroke(
                                1.dp,
                                Brush.linearGradient(colors)
                            ), //设置边框粗细与边框渐变色
                            shape = CutCornerShape(5.dp, 5.dp, 5.dp, 5.dp) //切角矩形形状
                        )
                )
                Text(text = stringResource(id = R.string.app_name))
                NewButton("返回") {
                    //点击事件
                    finish()
                }

            }
        }
    }

}

NewText和NewButton等方法均为工厂模式中的生产方法.

后续可进一步封装到具体的工厂类,可以生产众多页面共同样式的View.

这体现了Compose其中一个重要的优点:控件全属性复用,完美克隆

复制代码

深海也是刚开始试着用Compose,就写点基础的供小白参考.
如果您感觉文章有用的话麻烦点个赞吧.

复制代码