Jetpack Compose 的Column , Row ,Box 的用法(1)

@Preview()

@Composable

fun columnTest(){

Column(

// 设置Column的宽度高200dp

modifier = Modifier.size(200.dp),

// 设置居底部对齐

verticalArrangement = Arrangement.Bottom){

Text(text = “第一个文本控件ikkokokojih呼呼呼呼呼呼”)

Text(text = “第二个文本控件”)

}

}

• horizontalAlignment 表示是水平方向上的对齐方式。默认是从左边开始

举个例子说明，比如上面两个文本控件，一个比较长，一个比较短。如果horizontalAlignment设置的是End。那么两个文本控件就会居右对齐。

@Preview()

@Composable

fun columnTest(){

Column(horizontalAlignment = Alignment.End){

Text(text = “第一个文本控件,我是比较长的那个文本控件”)

Text(text = “第二个文本控件”)

}

}

• content 所有布局的最后一个参数都是 content，它是一个发出子界面元素的函数。其实上就是子元素的内容，比如这里就是两个Text文本控件。其实Column的完整的写法是如下：

Column(

content = {

Text(“Some text”)

Text(“Some more text”)

Text(“Last text”)

}

)

只不过是kotlin的lambda语法，Compose支持了。所以就把这种繁琐的写法简单的写成

Column{

Text(“Some text”)

Text(“Some more text”)

Text(“Last text”)

}

二：横向布局 Row

使用 Row 可将多个项水平地放置在屏幕上。Row和Column一样都支持配置它们所含元素的对齐方式。我们还是拿两个文本控件来举例。两个文本控件横向排列

@Preview()

@Composable

fun rowTest(){

Row{

Text(text = “第一个文本控件ikkokokojih呼呼呼呼呼呼”)

Text(text = " 第二个文本控件")

}

}

再来看看Row的源码

@Composable

@OptIn(ExperimentalLayoutNodeApi::class, InternalLayoutApi::class)

inline fun Row(

modifier: Modifier = Modifier,

horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,

verticalAlignment: Alignment.Vertical = Alignment.Top,

content: @Composable RowScope.() -> Unit

) {

…

}

我们可以看到跟Column一样。

• modifier修饰符 （后面文章会单独讲解）

• horizontalArrangement 设置水平方向上的对齐方式（由于Column讲解过这里就不举例了）

• verticalAlignment 设置竖直方向上对齐方式（由于Column讲解过这里就不举例了）

• content 布局内容 （由于Column讲解过这里就不举例了）

三：Box (类似FramLayout布局)

使用 Box 可将一个元素放在另一个元素上，类似FramLayout布局。

Box(Modifier.size(200.dp).background(Color.Red)){

Text(text = “第一个文本控件ikkokokojih呼呼呼呼呼呼”)

Text(text = “第二个文本控件”)

}

比如上面这个例子就是第二个文本控件叠放在第一个文本控件上面。 再来看看Box的源码

@Composable

@OptIn(ExperimentalLayoutNodeApi::class)

inline fun Box(

modifier: Modifier = Modifier,

contentAlignment: Alignment = Alignment.TopStart,

content: @Composable BoxScope.() -> Unit

) {

…

}

• modifier修饰符 （后面文章会单独讲解）

• contentAlignment 是设置子控件的对齐方式，比如设置底部居中

@Preview()

@Composable

fun boxTest(){

Box(Modifier.size(300.dp).background(Color.Red),

尾声

评论里面有些同学有疑问关于如何学习material design控件，我的建议是去GitHub搜，有很多同行给的例子，这些栗子足够入门。

有朋友说要是动真格的话，需要NDK以及JVM等的知识，首现**NDK并不是神秘的东西，**你跟着官方的步骤走一遍就知道什么回事了，无非就是一些代码格式以及原生/JAVA内存交互，进阶一点的有原生/JAVA线程交互，线程交互确实有点蛋疼，但平常避免用就好了，再说对于初学者来说关心NDK干嘛，据鄙人以前的经历，只在音视频通信和一个嵌入式信号处理（离线）的两个项目中用过，嵌入式信号处理是JAVA->NDK->.SO->MATLAB这样调用的我原来MATLAB的代码，其他的大多就用在游戏上了吧，一般的互联网公司会有人给你公司的SO包的。
至于JVM,该掌握的那部分，相信我，你会掌握的，不该你掌握的，有那些专门研究JVM的人来做，不如省省心有空看看计算机系统，编译原理。

一句话，平常多写多练，这是最基本的程序员的素质，尽量挤时间，读理论基础书籍，JVM不是未来30年唯一的虚拟机，JAVA也不一定再风靡未来30年工业界，其他的系统和语言也会雨后春笋冒出来，但你理论扎实会让你很快理解学会一个语言或者框架，你平常写的多会让你很快熟练的将新学的东西应用到实际中。
初学者，一句话，多练。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！