Jetpack Compose系列(2)-基础组件
从Hello Android 开始
接上篇文章，打开默认工程后我们会看到一段Hello Android！默认代码。
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApplicationTheme {
// A surface container using the 'background' color from the theme
Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
Greeting("Android")
}
}
}
}
}
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
MyApplicationTheme {
Greeting("Android")
}
}
你会发现，DefaultPreview()和Greeting()前面都有个 @ Composable。这种函数名前面加上一个 @Composable 注解的函数叫做compose函数，Jetpack Compose就是围绕 composable 函数来构建的。
Compose函数
加@Compose注解的函数可以相互调用(使用@Composable注解修饰，表示这是一个可组合函数)，这些函数会被插件编译处理，所以如果一个函数不是生成UI的，那么不要用此注解。@Preview注解，可以在右边实时预览(实时预览也是更新使用JetpackCompose后有的新特性)，改动函数后，刷新一个预览即可，添加该注解的外层函数不能有参数，但是里面可以嵌套一个带参数的函数来预览。可以在@Preview后面添加一个名字，如：@Preview(“code preview”)。
此外，compose 的预览还可以同时预览多个 composable 函数，如下图:
基础控件
0、setContent()
setContent()是ComponentActivity的一个拓展方法，其中的content参数需要传入一个由@Composable注解的函数，值得一提的是@Composable并非传统意义上的注解处理器，Compose 在 Kotlin 编译器的类型检测与代码生成阶段依赖 Kotlin 编译器插件工作，所以无需注解处理器即可使用 Compose。
观察其源码，我们可以发现，程序逻辑会先去寻找Activity的根布局，若未找到则创建一个，然后将由@Conposable注解函数内的声明式布局创建。传入到setContent()中的Greeting()是创建的视图内容的具体声明描述罢了。
1、 文本
函数：Text()
Text("默认")
若只需要单纯的显示字符串，只需要将字符串放在Text（）的括号里即可，同时也可以附上其他属性，中间用逗号隔开即可。
Text("大小、颜色", fontSize = 16.sp, color = Color.Blue)
Text("斜体", fontStyle = FontStyle.Italic , fontWeight = FontWeight.Bold)
Text("居中 字体Serif", textAlign = TextAlign.Center,
modifier = Modifier.fillMaxWidth(), fontFamily = FontFamily.Serif)
Text("SansSerif字体文字溢出... ".repeat(50), maxLines = 2,
overflow = TextOverflow.Ellipsis, fontFamily = FontFamily.SansSerif)
将以上Text()放到@Preview函数里可以依次看到预览：
此外，还有这些可改变分为更大的属性：
文字可选择：SelectionContainer(){}
文字不可选择：DisableSelection(){}
可点击文字：ClickableText(){}
组合文字：buildAnnotatedString(){}
…等等，结合在一起，可以组成各种想要的花式界面，例如：
Text(
buildAnnotatedString {
withStyle(style = SpanStyle(color = Color.Red)) {
append("H")
}
append("e")
withStyle(style = SpanStyle(color = Color.Yellow)){
append("ll")
}
append("o ")
withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Blue)) {
append("And")
}
append("roid")
}
)
可预览显示出：
除此之外，Text还有以下丰富属性可供使用：
2、Column ()
当我们要设置多个Text()时，如果你按下面方式设置，会显示如下预览界面：
上述代码由于我们还没有提供有关如何排列它们的任何信息，因此三个文本元素显示相互重叠绘制使得文本可读性极差。
这里就要引入我们的纵向布局Column () ，名字跟Flutter中的Column Weight的名字不能说很像，只能说一模一样，当然，功能也一样。效果如下图所示：
可见，Column()的加入使得前面重叠的Text垂直排列了，默认情况下从左上角开始往下依次排列，就像原生安卓的LinearLayout，当然，也可以进行一些样式更改。在调用Column()时传递参数来配置大小、位置以及排列方式。
Column (
Modifier.background(Color.Red)
.width(50.dp)
.height(90.dp),
horizontalAlignment = Alignment.CenterHorizontally,//子元素的水平方向对齐
verticalArrangement = Arrangement.Center//子元素的垂直方向对齐效果
){
Text(text = "11111")
Text(text = "22222")
Text(text = "33333")
}
此段代码运行后的效果则是：
由此可以猜出上述代码属性功能：
Modifier.background(Color.Red).width(50.dp).height(90.dp)
这段代码声明了背景颜色及宽度和高度。此段代码等价于
Modifier.background(Color.Red).size(50.dp,90.dp)
(size、width、height在这不是必填选项，可只填背景也可只设置宽高)另外两个属性则代表意思是：
horizontalAlignment ：子元素的水平方向对齐
verticalArrangement ：子元素的垂直方向排列
（注意，你看上述运行效果就明白这里面的对齐排列指的是子元素Text相对于背景的属性，而不是整个屏幕）。
两个属性的取值如下表：
当然，也可以通过这两个属性来设置上下元素边距，例如：
verticalArrangement = Arrangement.spacedBy(4.dp)
3、Row ()
上述已经说明，Column()是将多个项垂直地放置在屏幕上。与此相对，使用横向布局 Row() 可将多个项水平地放置在屏幕上。Row()的属性名称跟Column()有些许差别外，其余差别不大，与之相对的属性：
horizontalArrangement ：子元素的水平方向排列效果
verticalAlignmentment ：子元素的垂直方向对齐效果
当然，也可以在调用的时候修改颜色、对其位置等属性：
Row (
Modifier.background(Color.Red)
.size(90.dp,50.dp),
horizontalArrangement = Arrangement.Center,//子元素的水平方向对齐
verticalAlignment = Alignment.CenterVertically//子元素的垂直方向对齐效果
){
Text(text = "111")
Text(text = "222")
Text(text = "333")
}
对应的效果为：
取值类型和设置边距（Row()为横向）也与Column()一致。
End，有问题请留言。