[移动开发]Compose_02--布局

??? 写完Compose第一个程序之后，接着了解Compose的布局。在Compose中有Column、Row和Box三种布局，其中Column是垂直布局，相当于把LinearLayout的orientation属性设置为vertical；Row是水平布局，相当于把LinearLayout的orientation属性设置为horizontal；Box是层叠布局，相当于FrameLayout。

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class Compose_02Activity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Compose_02_column(name = "002")
        }
    }
}

// 垂直排列
@Composable
fun Compose_02_column(name: String){
    Column {
        Compose_02_row(name)
        Spacer(modifier = Modifier.height(10.dp)) // 设置垂直排列两个控件间的距离
        Compose_02_box()
    }
}

// 水平排列
@Composable
fun Compose_02_row(name: String){
    Row {
        Compose_01(name = "001")
        Spacer(modifier = Modifier.width(10.dp)) // 设置垂直排列两个控件间的距离
        Text(text = "Compose_02，我是 $name!")
    }
}

// 层叠排列
@Composable
fun Compose_02_box(){
    Box {
        Image(painter = painterResource(id = R.drawable.ic_launcher_round), contentDescription = "放弃了放弃")
        Text(text = "放弃了放弃")
    }
}

//在AS预览界面
@Preview(showBackground = false)
@Composable
fun Compose_02_column(){
    Compose_02_column("002")
}

?下面是程序运行的效果图：

?

?