compose 基础

• 确保您选择的最小sdkversion至少是API级别21，这是Compose支持的最小API。

• @Composable
  fun Greeting(name: String) {
      Surface(color = Color.Yellow) {
          Text (text = "Hello $name!")
      }
  }

  The components nested inside Surface will be drawn on top of that background color (unless specified otherwise by another Surface).

• @Composable注释只需用在 绘制UI 和调用其他@Composable绘制UI的函数上
• 注意MainActivity中的可组合函数，在MainActivity类之外，声明为顶级函数（top level function）。Activity之外的代码越多，可以共享和重用的代码就越多。
• 您可以将UI组件提取到@Composable function中，这样就可以重用(reuse)它们，而无需复制代码
• Compose还会查看单个可组合组件需要哪些数据，以便只需要重新组合数据已更改的组件，而可以跳过组合数据未受影响的组件。

• 1:column and divider
  To place items in a vertical sequence, use the Column Composable function (similar to a vertical LinearLayout)
  
  Divider is a provided composable function that creates a horizontal divider.(一条水平分割线)
  
  @Composable
  fun MyScreenContent() {
      Column {
          Greeting("Android")
          Divider(color = Color.Black)
          Greeting("there")
      }
  }
  
  2:remeber and mutableStateOf()
  记住lambda得到的值。计算只会在组合期间进行。重新组合将始终返回由组合生成的值。
  
  返回一个用传入的值初始化的新的MutableState
  MutableState类是一个值容器，Compose会观察它的读写。此外，对它的写操作是作为Snapshot系统的一部分进行的。
  
  

  @Composable
  fun CountButton(){
      val count = remember{ mutableStateOf(0)}
      TextButton(onClick = {count.value++}) {
          Text(text = "You have clicked ${count.value} times")
      }
  }
  
  
  3:Modifier.wieght(Float)
  通过Modifier.weight来设置控件的比重

  Column(modifier = Modifier.fillMaxHeight()) {
      Column(modifier = Modifier.weight(1f)) {
          for (name in names) {
              Greeting(name = name)
              Divider(color = Color.Black)
          }
      }
  .....
  
  4: change button colors
  创建ButtonColors，表示Button中使用的默认背景和内容颜色。
  

  Button(
          onClick = { updateCount(count+1) },
          colors = ButtonDefaults.buttonColors(
              backgroundColor = if (count > 5) Color.Green else Color.White//还有文本颜色等选项
          )
      ) {
          Text("I've been clicked $count times")
      }
  
  5: LazyColumn and its items element
  无论您是在交互模式下呈现它，还是在设备/模拟器上部署它，您都无法滚动这数千行，因为默认情况下Column是不可滚动的。
  要显示可滚动的列，我们使用LazyColumn。LazyColumn只在屏幕上显示可见的项目，在显示大列表时可以提高性能。它相当于Android视图中的RecyclerView。
  由于列表中包含数千个项目，渲染时会影响应用程序的流动性，所以使用LazyColumn只渲染屏幕上可见的元素，而不是所有元素。
  在其基本用法中，LazyColumn API在其作用域内提供了一个items元素，其中指定数据源，并且指定单一项的绘制逻辑:
  

  @Composable
  fun NameList(names: List<String>, modifier: Modifier = Modifier) {
     LazyColumn(modifier = modifier) {
         items(items = names) { name ->
             Greeting(name = name)
             Divider(color = Color.Black)
         }
     }
  }
  6: using theme's style easier
  

  Whenever you want to query a color or a text style from your Theme, use MaterialTheme.colors or MaterialTheme.typography in a Composable function.

  For example, style = MaterialTheme.typography.body1

  For example, color = MaterialTheme.colors.surface

  您可以使用copy函数修改预定义的样式。
  For example, style = MaterialTheme.typography.body1.copy(color = Color.Yellow)
  
  

   

 

创建可通用的composable函数：

要创建泛型容器，请创建一个可组合函数，该函数以返回Unit的可组合函数(这里称为content)作为参数。您可能已经注意到，之所以返回Unit，是因为可组合函数不会返回UI组件，而是发出(emit)它们。这就是为什么他们必须返回Unit

@Composable
fun MyApp(content: @Composable () -> Unit) {
    BasicsCodelabTheme {
        Surface(color = Color.Yellow) {
            content()
        }
    }
}

在函数中，您定义了希望容器提供的所有共享配置，然后调用传递的子组件Composable。

利用kotlin语法中的尾随lambda, 我们可以这样使用：

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApp {
                Greeting("Android")
            }
        }
    }
}

@Composable
fun MyApp(content: @Composable () -> Unit) {
    BasicsCodelabTheme {
        Surface(color = Color.Yellow) {
            content()
        }
    }
}