本文的代码由上一篇文章的Demo进一步书写完成,
传送门:Android Compose的基本使用-CSDN博客
_____________________________________________________________________________
以下代码分别列举了控件的:
内边距,外边距,内容居中,渐变自定义边框,宽度权重,string资源引用等定义方式
MainActivity:
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:
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,就写点基础的供小白参考. 如果您感觉文章有用的话麻烦点个赞吧.