C/C++教程

Compose_02--布局

本文主要是介绍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")
}

 下面是程序运行的效果图:

 

 

这篇关于Compose_02--布局的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!