Android笔记--Compose基础

Posted 2023-03-07 ljt2724960661

         Compose是Google出的一个UI库，声明式开发，在构建界面的时候，无需像之前那么构建 XML 布局，只需要调用 Jetpack Compose 函数来声明你想要的的元素，所有的组合函数都必须添加 @Compose 注解才可以,带有@Composable注解，它会告知Compose编译器，此函数将数据转换为界面，并且为界面的一个元素。简单看一个demo

implementation("androidx.navigation:navigation-compose:2.4.1")

setContent 
           MaterialTheme 
               Surface(color = MaterialTheme.colorScheme.background) 
                   navigatePageDemo()
               
           
        

@Composable
    fun navigatePageDemo() 
        val navController = rememberNavController()
        NavHost(navController = navController, startDestination = RouteConfig.PAGEONE) 

            composable(RouteConfig.PAGEONE) 
                pageOne(navController)
            

            composable(
                "$RouteConfig.PAGETWO/$ParamsConfig.NAME"+"?$ParamsConfig.AGE=$ParamsConfig.AGE",
                arguments = listOf(
                    navArgument("$ParamsConfig.NAME"),
                    navArgument("$ParamsConfig.AGE")defaultValue = 10
                        type = NavType.IntType)
            ) 
                val arg = requireNotNull(it.arguments)
                arg.let 
                    val name = arg.getString(ParamsConfig.NAME)
                    val age = arg.getInt(ParamsConfig.AGE)
                    pageTwo(navController,name!!,age)
                
            
        
    

 @Composable
 fun pageOne(navController: NavController) 
     navController.currentBackStackEntry
     Column(modifier = Modifier
         .fillMaxWidth()
         .fillMaxHeight()
         .background(
             androidx.compose.ui.graphics.Color.White
         )
     ) 
         Spacer(modifier = Modifier.height(20.dp))
         Text(text = "页面1")
         Spacer(modifier = Modifier.height(20.dp))
         Button(onClick = 
             //点击跳转到页面2
//             navController.navigate("$RouteConfig.ROUTE_PAGETWO/汉密尔顿/26")
             navController.navigate("$RouteConfig.PAGETWO/汉密尔顿")
         ) 
             Text(
                 text = "跳转页面2",
                 modifier = Modifier.fillMaxWidth(),
                 textAlign = TextAlign.Center
             )
         
     
 

    @Composable
    fun pageTwo(navController: NavController,name:String,age:Int) 
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .fillMaxHeight()
                .background(
                    androidx.compose.ui.graphics.Color.White
                )
        ) 
            Spacer(modifier = Modifier.height(20.dp))
            Text(text = "页面2")
            Spacer(modifier = Modifier.height(20.dp))
            Text(text = "我是$name,今年$age 岁")
            Button(onClick = 
               navController.popBackStack()
            ) 
                Text(
                    text = "返回页面1",
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center
                )
            
        
    

object ParamsConfig 
    const val NAME = "name"
    const val AGE = "age"


object RouteConfig 
    const val  PAGEONE= "pageOne"
    const val  PAGETWO= "pageTwo"

       组件中常涉及到属性修饰符Modifier，它能够修饰如下属性:

background 可组合元素的背景色；
clickable 使可组合项响应用户点击，并显示波纹效果；
padding 设置元素周围留出空间；
size 可组合元素的尺寸；
clip 可组合元素的形状；
border 可组合元素的边框及形状；
fillMaxSize可组合元素尺寸按父布局的最大尺寸显示；
fillMaxWidth 可组合元素宽度按父布局的最大宽度显示；
fillMaxHeight 可组合元素高度按父布局的最大高度显示；

            它是一个接口，Modifier接口有三个直接实现类或接口：伴生对象Modifier、内部子接口Modifier.Element、CombinedModifier，伴生对象Modifier：最常用的Modifier， 当我们在代码中使用 Modifier.xxx()，实际使用的就是这个伴生对象,内部子接口 Modifier.Element：当我们使用Modifier.xxx()时，其内部实际会创建一个Modifier实例。我们以size为例。当我们使用Modifier.size(100.dp)时，实际上内部会创建一个SizeModifier实例。源码中，可以发现SizeModifier实现了LayoutModifier接口，而LayoutModifier接口又是Modifier.Element的子接口。