Android全新UI框架之常用ComposeUI组件

在Compose中，每个组件都是一个带有@Composable注解的函数，被称为Composable。Compose已经预置了很多基于MD设计规范的Composable组件。

在布局方面，Compose提供了Column、Row、Box三种布局组件(感觉跟flutter差不多)，类似于传统视图开发中的LinearLayout(Vertical)、LinearLayout(Horizontal)、RelateiveLayout，可以满足各类产品的常见布局需求。

Modifier修饰符

在传统开发中，使用xml文件来描述组件的样式，而compose则是使用Modifier修饰符。Modifier允许我们通过链式调用的方式为组件应用一系列的样式设置，如边距、字体、位移等。在Compose中，每个基础的Composable组件都有一个modifier参数，通过传入自定义的Modifier来修改组件的样式。

• 常见修饰符

  Modifier.size	设置被修饰组件的大小	Image( painter = painterResource(id = R.drawable.ic_launcher),contentDescription = null, modifier = Modifier.size(width = 10.dp, height = 10.dp) )
  Modifier.background	设置被修饰组件的背景颜色。背景色支持纯色背景，也可以使用brush设置渐变背景	Image(painter = painterResource(id = R.drawable.ic_launcher),contentDescription = null,modifier = Modifier.size(width = 100.dp, height = 100.dp).background(brush = Brush.verticalGradient(colors = listOf(Color.Blue,Color.Red)))))
  Modifier.fillMaxXXX()	让组件在高度或者宽度上填满父空间	fillMaxSize():填满整个父空间， fillMaxHeight():高度填满父空间，fillMaxWidth():宽度填满父空间
  Modifier.border&Modifier.padding	border用来为被修饰组件添加边框。边框可以指定颜色、粗细、以及通过shape指定形状。padding用来为被修饰组件增加间隙。可以在border前后各插入一个padding，区分对外和对内的间距	Box(modifier = Modifier.padding(5.dp).border(2.dp, Color.Green, shape = RoundedCornerShape(2.dp)).padding(5.dp)) { Spacer(modifier = Modifier.size(width = 100.dp, height = 10.dp).background(Color.Blue)) }
  Modifier.offset	用来移动被修饰组件的位置，分别传入水平方向和垂直方向的偏移量即可	Box(modifier = Modifier.size(100.dp).background(Color.Blue).offset(x = 10.dp, y = 10.dp).background(Color.Cyan)) {}

• 作用域限定Modifier修饰符

  Compose充分发挥kotlin的语法特性，让某些Modifier修饰符只能在特定作用域中使用，有利于类型安全地调用它们。所谓"作用域"，在kotlin中就是一个带有Receiver的代码块。注意Receiver代码块默认可以跨层级访问。在compose的DSL中，一般只需要调用当前作用域的方法，为此可以通过@LayoutScopeMarker注解来规避该问题。常见组件的Receiver作用域类型均已使用@LayoutScopeMarker注解进行了声明，使用了该注解之后，像跨级调用外层作用域的方法必须通过显式指明Receiver具体类型。

  @LayoutScopeMarker
  @Immutable
  interface ColumnScope
  

  常见的作用域限定Modifier修饰符：

  1. matchParentSize

     matchParentSize是只能在BoxScope中使用的作用域限定修饰符。当使用matchParentSize设置尺寸时，可以保证当前组件的尺寸与父组件相同。而父组件默认的是wrapContent。如果使用fillMaxSize取代matchParentSize，那么该组件的尺寸会被设置为父组件所允许的最大尺寸，这样会导致背景铺满整个屏幕，二者区别如下图所示。

         Column(modifier = Modifier.background(Color.DarkGray)) {
             Box() {
                 Box(modifier = Modifier
     //                .fillMaxSize()
                     .matchParentSize()
                     .background(Color.Cyan))
                 Spacer(modifier = Modifier.size(50.dp).padding(10.dp).background(Color.Red))
             }
         }
     

     matchParentSize效果如下所示：
     

     fillMaxSize效果如下所示：

  2. weight

     在RowScope和ColumnScope中，可以使用专属的weight修饰符来设置尺寸。与size不同的是weight允许组件通过百分比设置尺寸，也就是允许组件可以自适应适配各种屏幕尺寸的移动端设备。

         Column(modifier = Modifier
             .background(Color.DarkGray)
             .width(300.dp)
             .height(200.dp)) {
           Spacer(modifier = Modifier
               .fillMaxWidth()
               .weight(1f)
               .background(Color.White))
             Spacer(modifier = Modifier
                 .fillMaxWidth()
                 .weight(1f)
                 .background(Color.Red))
             Spacer(modifier = Modifier.fillMaxWidth().weight(1f).background(Color.Blue))
         }
     

• Modifier实现原理

  各位读者可以参考下面这篇博客：
  图解Compose Modifier实现原理 ，竟然如此简单！

常用的基础组件

文字组件

1. Text文本
   在Compose中，Text是遵循MD设计规范的上层文本组件，如果想脱离MD，也可以直接使用更底层的文本组件BasicText。

   @Composable
   fun Text(
       text: String,
       modifier: Modifier = Modifier,
       color: Color = Color.Unspecified,
       fontSize: TextUnit = TextUnit.Unspecified,
       fontStyle: FontStyle? = null,
       fontWeight: FontWeight? = null,
       fontFamily: FontFamily? = null,
       letterSpacing: TextUnit = TextUnit.Unspecified,
       textDecoration: TextDecoration? = null,
       textAlign: TextAlign? = null,
       lineHeight: TextUnit = TextUnit.Unspecified,
       overflow: TextOverflow = TextOverflow.Clip,
       softWrap: Boolean = true,
       maxLines: Int = Int.MAX_VALUE,
       onTextLayout: (TextLayoutResult) -> Unit = {},
       style: TextStyle = LocalTextStyle.current
   )

   在很多应用场景中，我们需要在一段文字中对局部内容应用特别格式以示突出，比如一个超链接，此时需要用到AnnotatedString。AnnotatedString是一个数据类，除了文本值，还包含一个SpanStyle和ParagraphStyle的Range列表。SpanStyle用于描述在文本中子串的文字样式，ParagraphStyle则用于描述文本中子串的段落样式，Range确定子串的范围。
   用法如下所示：

   //append用来添加子串的文本
   //withStyle为append的子串指定文字或段落样式
   Text(text = buildAnnotatedString {
       withStyle(style = SpanStyle(fontSize = 24.sp)){
            append("你现在学习的章节是")
        }
        withStyle(style = SpanStyle(fontSize = 24.sp, fontWeight = FontWeight.W900)){
            append("Text")
        }
        append("\n")
        withStyle(style = ParagraphStyle(lineHeight = 25.sp)){
            append("在刚刚讲过的内容中，我们学会了如何应用文字样式，以及如何限制文本的行数和处理溢出的视觉效果。")
            append("\n")
            append("现在，我们正在学习")
            withStyle(style = SpanStyle(fontWeight = FontWeight.W900, textDecoration = TextDecoration.Underline, color = Color(0xff59a869))){
                append("AnnotatedString")
            }
        }
    })

   SpanStyle继承了TextStyle中关于文字样式相关的字段，而ParagraphStyle继承了TextStyle中控制段落的样式，例如textAlign、lineHeight等。SpanStyle和ParagraphStyle中的设置优先于TextStyle中同名属性设置。

• SelectionContainer选中文字

  Text自身默认是不能被长按选择的，Compose提供了专门的SelectionContainer组件，对包裹的Text进行选中。

  SelectionContainer() {
      Text(text = "我是可以被复制的文字")
  }

• ClickableText

  Compose提供了一种可点击文本组件，可以响应对文字的点击，并返回点击位置。可以让AnnotatedString子串在相应的ClickedText中点击后，做出不同的动作。在AnnotatedString中可以为子串添加一个tag标签，在处理onClick事件时，根据tag实现不同的逻辑。

   ClickableText(text = annotated, onClick ={
                      annotated.getStringAnnotations(
                          tag = "URL",
                          start = it,
                          end = it
                      ).firstOrNull()?.let {
                          Log.e("MainActivity",it.toString())
                      }
                  } )
   
   val annotated = buildAnnotatedString {
          withStyle(style = ParagraphStyle(lineHeight = 25.sp)){
              // 开始一个注解区域
              pushStringAnnotation(tag = "URL", annotation = "https://www.baidu.com")
              // 追加带有注解的文本
              withStyle(
                  style = SpanStyle(
                      fontWeight = FontWeight.W900,
                      textDecoration = TextDecoration.Underline,
                      color = Color(0xff59a869)
                  )
              ){
                  append("AnnotatedString")
              }
              // 结束注解区域
              pop()
              //下面这段文本不会有注解
              withStyle(
                  style = SpanStyle(
                      fontWeight = FontWeight.W900,
                      textDecoration = TextDecoration.Underline,
                      color = Color(0xff59a869)
                  )
              ){
                  append("NotAnnotatedString")
              }
          }
      }

• TextField输入框

  TextField组件是我们最常用的文本输入框，它也遵循MD设计准则。它也有一个低级别的底层组件，BasicTextField,与TextField和OutlinedTextField不同的是，BasicTextField拥有更多的自定义效果。由于TextField和OutlinedTextField是根据MD准则设计的，无法直接修改输入框的高度，如果尝试修改高度，会看到输入区域被截断，影响正常输入。

  fun TextField(
      value: TextFieldValue,
      onValueChange: (TextFieldValue) -> Unit,
      modifier: Modifier = Modifier,
      enabled: Boolean = true,
      readOnly: Boolean = false,
      textStyle: TextStyle = LocalTextStyle.current,
      label: @Composable (() -> Unit)? = null,
      placeholder: @Composable (() -> Unit)? = null,
      leadingIcon: @Composable (() -> Unit)? = null,
      trailingIcon: @Composable (() -> Unit)? = null,
      supportingText: @Composable (() -> Unit)? = null,
      isError: Boolean = false,
      visualTransformation: VisualTransformation = VisualTransformation.None,
      keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
      keyboardActions: KeyboardActions = KeyboardActions.Default,
      singleLine: Boolean = false,
      maxLines: Int = Int.MAX_VALUE,
      interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
      shape: Shape = TextFieldDefaults.filledShape,
      colors: TextFieldColors = TextFieldDefaults.textFieldColors()
  )
  fun BasicTextField(
      value: String,
      onValueChange: (String) -> Unit,
      modifier: Modifier = Modifier,
      enabled: Boolean = true,
      readOnly: Boolean = false,
      textStyle: TextStyle = TextStyle.Default,
      keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
      keyboardActions: KeyboardActions = KeyboardActions.Default,
      singleLine: Boolean = false,
      maxLines: Int = Int.MAX_VALUE,
      visualTransformation: VisualTransformation = VisualTransformation.None,
      onTextLayout: (TextLayoutResult) -> Unit = {},
      interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
      cursorBrush: Brush = SolidColor(Color.Black),
      decorationBox: @Composable (innerTextField: @Composable () -> Unit) -> Unit =
          @Composable { innerTextField -> innerTextField() }
  ) 

  TextField输入框案例如下：

  @Composable
      fun TextFieldSample(){
          var text by remember {
              mutableStateOf("")
          }
          Box(
              modifier = Modifier
                  .fillMaxSize()
                  .background(Color(0xfd3d3d3)),
              contentAlignment = Alignment.Center
          ) {
              BasicTextField(
                  modifier = Modifier
                      .padding(10.dp)
                      .background(Color.White, CircleShape)
                      .height(30.dp)
                      .fillMaxSize(),
                  value = text,
                  onValueChange = {text = it},
                  decorationBox = {
                      Row(
                          verticalAlignment = Alignment.CenterVertically,
                          modifier = Modifier.padding(vertical = 2.dp, horizontal = 8.dp)
                      ) {
                          Icon(imageVector = Icons.Filled.Search, contentDescription = null)
                          Box(modifier = Modifier
                              .padding(horizontal = 10.dp)
                              .width(100.dp), contentAlignment = Alignment.CenterStart) {
                              if(text.isEmpty()){
                                  Text(
                                      text = "输入点东西看看吧～",
                                      style = TextStyle(
                                          color = Color(0,0,0,128)
                                      )
                                  )
                              }
                              it()
                          }
                         Box(contentAlignment = Alignment.CenterEnd){
                             if(text.isNotEmpty()){
                                 IconButton(
                                     onClick = { text="" },
                                     modifier = Modifier.size(16.dp)) {
                                     Icon(imageVector = Icons.Filled.Close, contentDescription = null, tint = Color.Red)
                                 }
                             }
                         }
                      }
                  })
          }
  
      }

• 图片组件

  1. Icon图标
     Icon组件用于显示一系列小图标。Icon组件支持三种不同类型的图片设置：

  @Composable
  fun Icon(
      imageVector: ImageVector,//矢量图对象，可以显示SVG格式的图标
      contentDescription: String?,
      modifier: Modifier = Modifier,
      tint: Color = LocalContentColor.current
  )
  @Composable
  fun Icon(
      bitmap: ImageBitmap,//位图对象，可以显示JPG、PNG等格式的图标
      contentDescription: String?,
      modifier: Modifier = Modifier,
      tint: Color = LocalContentColor.current
  )
  @Composable
  fun Icon(
      painter: Painter,//代表一个自定义画笔，可以使用画笔在Canvas上直接绘制图标
      contentDescription: String?,
      modifier: Modifier = Modifier,
      tint: Color = LocalContentColor.current
  )

  2. Image图片
     Image组件用来显示一张图片。它和Icon一样也支持三种类型的图片设置。

• 按钮组件

  1. Button按钮
     Button也是最常用的组件之一，它也是按照MD风格来实现的。Button并非唯一可点击组件，理论上任何Composable组件都可以通过Modifier.clickable修饰符化身为可点击组件。
     案例如下：

      @Composable
      fun ButtonSample(){
          val interactionSource = remember {
              MutableInteractionSource()
          }
          val pressState = interactionSource.collectIsPressedAsState()
          val borderColor = if (pressState.value) Color.Green else Color.White
          Button(
           modifier = Modifier.clickable {
           //该方法在button组件会失效
              Log.e("MainActivity","点击Butttonclickable")
          },
              interactionSource = interactionSource,
              border = BorderStroke(2.dp, color = borderColor),
              onClick = {
                  Log.e("MainActivity","点击Buttton")
              }) {
              Icon(imageVector = Icons.Filled.Done, contentDescription = null, modifier = Modifier.size(ButtonDefaults.IconSize))
              Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing))
              Text(text = "确认")
          }
      }

  2. IconButton图标按钮
     IconButton组件实际上只是Button组件的简单封装（一个可点击的图标），它一般用于应用栏中的导航或者其他行为。一般来说，需要在IconButton组件里提供一个图标组件，这个图标的默认尺寸一般为24*24dp。

   IconButton(
      onClick = { text="" },
      modifier = Modifier.size(16.dp)) {
      Icon(imageVector = Icons.Filled.Close, contentDescription = null, tint = Color.Red)

  3. FloatingActionButton悬浮按钮

      @Composable
      fun FloatButton(){
          FloatingActionButton(
              onClick = {}) {
              Row() {
                  Text(text = "添加到我的喜欢")
                  Icon(imageVector = Icons.Filled.Done, contentDescription = null, modifier = Modifier.size(ButtonDefaults.IconSize))
              }
          }
          ExtendedFloatingActionButton(
              onClick = { /*TODO*/ }) {
              Row() {
                  Text(text = "添加到我的喜欢")
                  Icon(imageVector = Icons.Filled.Done, contentDescription = null, modifier = Modifier.size(ButtonDefaults.IconSize))
              }
          }
      }

• 选择器

  1. CheckBox复选框

      @Composable
      fun ChecBoxDemo(){
          val checkedState = remember {
              mutableStateOf(true)
          }
          Checkbox(
              checked = checkedState.value,
              onCheckedChange ={checkedState.value = it},
          colors = CheckboxDefaults.colors(checkedColor =  Color(0xff0079d3)))
      }

  2. TriStateCheckBox三态选择框
     很多时候，我们的复选框会有很多个，并且希望能够统一选择或者取消，这个时候就可以使用三态选择框

   @Composable
      fun ChecBoxDemo(){
          val (state,onStateChange) = remember { mutableStateOf(true) }
          val (state2,onStateChange2) = remember { mutableStateOf(true) }
  
          val parentState = remember(state,state2) {
              if (state&&state2) ToggleableState.On
              else if (!state&&!state2) ToggleableState.Off
              else ToggleableState.Indeterminate
          }
  
          val onParentClick = {
              val s = parentState != ToggleableState.On
              onStateChange(s)
              onStateChange2(s)
          }
  
          TriStateCheckbox(
              colors = CheckboxDefaults.colors(checkedColor = Color.Red),
              state = parentState,
              onClick = onParentClick,
          )
  
          Column(Modifier.padding(10.dp,0.dp,0.dp,0.dp)) {
              Checkbox(checked = state, onCheckedChange = onStateChange )
              Checkbox(checked = state2, onCheckedChange = onStateChange2 )
  
          }
      }

  3. Switch单选开关------控制单个项目的开启或关闭状态

    @Composable
      fun ChecBoxDemo(){
          val checkedState = remember {
              mutableStateOf(true)
          }
          Switch(checked = checkedState.value, onCheckedChange = {checkedState.value = it})
      }

  4. Slider滑竿组件------可用来做音量、亮度之类的数值调整或进度条

   var sliderPosition by remember {
              mutableStateOf(0f)
          }
          Slider(value = sliderPosition, onValueChange = {sliderPosition = it})

  5. 进度条

    var progress by remember {
                      mutableStateOf(0.1f)
                  }
  
                  val animatedProgress by animateFloatAsState(targetValue = progress, animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec)
  
                  Column {
                      CircularProgressIndicator(progress = animatedProgress)
                      Spacer(modifier = Modifier.requiredHeight(30.dp))
                      OutlinedButton(onClick = {
                          if(progress<1f)progress +=.1f
                      }) {
                          Text(text = "增加进度")
                      }
  
                  }

  6. 对话框

      @Composable
      fun DialogDemo(){
          val openDialog = remember {
              mutableStateOf(true)
          }
          val dialogWidth = 200.dp
          val dialogHeight = 50.dp
          if(openDialog.value){
              Dialog(
                  onDismissRequest = { openDialog.value = false },
              properties = DialogProperties(
                  dismissOnBackPress = true,//允许通过点击物理返回键取消对话框
                  dismissOnClickOutside = true//允许点击对话框外部取消对话框
              )
              ) {
                  Box(modifier = Modifier
                      .size(dialogWidth, dialogHeight)
                      .background(Color.Blue))
              }
          }
      }

常用的布局组件

• 线性布局

  线性布局对应于传统视图中的linearLayout，Compose根据orientation的不同又分为Column和Row。

  1. Column
     Column是一个垂直线性布局组件，它能够将子项按照从上到下的顺序垂直排列。verticalArrangement和horizontalAlignment参数分别可以帮助我们安排子项的垂直/水平位置，在默认的情况下，子项会以垂直方向上靠上，水平方向上靠左来布置。
  2. Row
     Row组件能够将内部子项按照从左到右的方向水平排列。用法Column类似。

• 帧布局

  1. Box
     Box组件是一个能够将里面的子项依次按照顺序堆叠的布局组件，在使用上类似于传统视图中的Framelayout。
  2. Surface
     Surface是一个平面，在MD设计准则中也同样如此，我们可以将很多的组件摆放在这个平面之上，可以设置这个平面的边框、圆角、颜色等。

• Spacer留白

  在很多时候，需要让两个组件之间留有空白的间隔，这个时候就可以使用该组件。其实当Box组件没有content时，完全可以用Spacer替换。可以给Spacer做如下封装，可以更方便地用在水平或垂直布局中。

      @Composable
      fun WidthSpacer(value:Dp){
          Spacer(modifier = Modifier.width(value))
      }
  
      @Composable
      fun HeightSpacer(value:Dp){
          Spacer(modifier = Modifier.height(value))
      }

• ConstraintLayout约束布局

  各位读者可以参考下面这篇博客：
  Compose ConstraintLayout 详讲

• Scaffold脚手架

  Scaffold组件实现了MD的布局结构，通过配合其他MD组件可以轻松构建MD风格的页面。

      @SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
      @OptIn(ExperimentalMaterial3Api::class)
      @Composable
      fun Sample(){
          var selectedItem by remember {
              mutableStateOf(0)
          }
          val items = listOf(
              Item("主页",R.drawable.ic_launcher),
              Item("列表",R.drawable.ic_launcher),
              Item("设置",R.drawable.ic_launcher),
          )
  
          Scaffold(
  
              topBar ={
                 TopAppBar(
                     title = { Text(text = "主页")},
                     navigationIcon = {
                         IconButton(onClick = { /*TODO*/ }) {
                             Icon(imageVector = Icons.Filled.Menu, contentDescription = null)
                         }
                 })
              }){
              Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center){
                  Text(text = "主页面")
              }
          }
      }

列表

很多产品中都有展示一组数据的需求场景，如果数据数量是可以枚举的，则仅需通过Column组件来枚举列出。然而很多时候，列表中的项目会非常多，我们需要滑动列表来查看所有内容，可以通过给Column的modifier添加verticalScroll方法来让列表实现滑动。

    @Composable
    fun ListDemo(){
        val initialCapacity = 1000 // 设置你想要的初始容量
        val items = ArrayList<String>(initialCapacity)
        for (i in 1..initialCapacity) {
            items.add("我是text$i")
        }
        Column(
            modifier = Modifier
                .verticalScroll(state = ScrollState(5), enabled = true)
        ) {
            items.forEach{
                Text(text = "$it")
            }

        }
    }

给Column的Modifier添加verticalScroll方法可以让列表实现滑动。但是如果列表过长，众多的内容会占用大量的内存。然而更多的内容对于用户其实都是不可见的，没有必要加载到内存。所以compose提供了专门用于处理长列表的组件，LazyColumn和LazyRow，其作用类似于传统视图中的Listview和RecyclerView。

  LazyColumn(
    modifier = Modifier
            .fillMaxSize()
            .background(Color.Cyan),
        contentPadding = PaddingValues(30.dp),//为内容设置外边距
    verticalArrangement = Arrangement.spacedBy(10.dp)//为每个item设置间隔
    ) {
        items(1000){
            Text(text = "$it")
        }

    }