• Android笔记（六）：JetPack Compose常见的UI组件

    一、文本组件

    1.1Text

    Column(modifier = Modifier
        .fillMaxSize()
        .background(Color.Green)
        .padding(10.dp)){
        Text(text= stringResource(id = R.string.title_content),
            modifier= Modifier
                .fillMaxWidth()
                .border(BorderStroke(1.dp, Color.White)),
            fontSize = 20.sp,
            textAlign = TextAlign.Center,
            maxLines = 5)
        Text(text= "测试文本2",
            modifier= Modifier
                .fillMaxWidth()
                .border(BorderStroke(1.dp, Color.White)),
            fontSize = 20.sp,
            textAlign = TextAlign.Center)
            }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    在这里插入图片描述
    Text显示的文本来源可以引用res->values->strings.xml中的资源，如第一个显示文本所示。

    1.2文本输入框

        var text by remember { mutableStateOf("")}

    Column(modifier = Modifier
        .fillMaxSize()
        .background(Color.Green)
        .padding(10.dp)){
        TextField(value = text,
                  onValueChange = {it:String->
                      text = it
                  },
                  label ={Text("文本输入框")},
                  leadingIcon = {
                      Icon(imageVector = Icons.Default.Email,contentDescription = "账号")
                  },
                  trailingIcon={
                      Icon(imageVector = Icons.Default.Person, contentDescription = "用户名")
                  }
        )

        OutlinedTextField(
            value = text,
            onValueChange ={
            text = it},
            label={Text("边框文本输入框")},
            leadingIcon = {
                Icon(imageVector = Icons.Filled.Star, contentDescription = "密码")
            }
        )

        BasicTextField(value = text,
                       onValueChange = {
                        text = it
                       },
                       decorationBox = {innerTextField ->
                           Row(verticalAlignment = Alignment.CenterVertically){
                               Icon(imageVector = Icons.Default.Search,contentDescription = "搜索")
                               innerTextField()
                           }

                       },
                       modifier = Modifier
                           .padding(horizontal = 5.dp)
                           .background(Color.White, CircleShape)
                           .height(50.dp)
                           .fillMaxWidth()
        )
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

    在这里插入图片描述

    二、按钮组件

      var clickIcon by remember {
        mutableStateOf(Icons.Filled.ShoppingCart)
  }
  val clickInteraction = remember { MutableInteractionSource()}

  val pressState = clickInteraction.collectIsPressedAsState()
  Column(modifier = Modifier
        .fillMaxWidth()
        .padding(10.dp),
        verticalArrangement = Arrangement.Center
        ){

        Button(modifier = Modifier.clickable {
                 /*内部已经被占用，会被拦截，因此日志不会显示*/
                 Log.d("TAG","点击按钮")
             },
            onClick = {
            clickState = !clickState
            clickIcon =  if(clickState) Icons.Filled.Star else Icons.Filled.ShoppingCart
        }, interactionSource = clickInteraction, //监听组件状态
        border = BorderStroke(5.dp,borderColor)
        ){
            Text("按钮:"+pressState.value)
        }

        IconButton(onClick = {
          
        }) {
            Icon(imageVector = clickIcon,contentDescription = "图标按钮")
        }

        TextButton(onClick = {

        }){
            Text("文本按钮")
        }
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    点击按钮前：
    在这里插入图片描述
    点击按钮后：
    在这里插入图片描述
    点击第一个圆角按钮不放时，显示为按钮:true

    Button有两方面需要注意：
    （1） Buttton有一个参数interactionSource，用来监听组件状态的事件源，通过它获取组件的状态来设置不同的样式。获取的组件的状态可以是：

    interactionSource.collectIsPressedAsState()：判断是否按下状态
    interactionSource.collectIsFocusedAsState()：判断是否获取焦点的状态
    interactionSource.collectIsDraggedAsState()：判断是否拖动

    （2） 所有的Composable的组件都具有Modifier.clickable修饰符，用来处理组合组件的事件，如Material Design风格的水波纹等，是通过内部拦截Modifier.clickable来实现。因为Modifier.clickable已经被内部占用，需要额外定义Button的onClick用来处理点击开发者定义事件。

    三、图片组件

    定义图片可以通过Image和Icon来实现，调用的形式如下述代码：

    Column(modifier= Modifier
        .fillMaxSize()
        .padding(20.dp)){
        //必须是png,jpg的图片
        Image(painter = painterResource(id = R.mipmap.laugh),
              contentDescription = "不支持使用")
        //Icon默认的背景颜色是黑色
        Icon(imageVector = Icons.Default.Face,
             tint = Color.Green,
             contentDescription = "图标示例1")
        Icon(painter= painterResource(id = R.mipmap.laugh),
             contentDescription = "图标示例2",
             tint = Color.Blue)
        Icon(bitmap = ImageBitmap.imageResource(id = R.mipmap.laugh),
             contentDescription = "图标示例3",
             tint=Color.Unspecified)
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    在这里插入图片描述

    一共定义了四张图，第2张图是调用系统内部的图标。引用图片资源主要有三种形式：

        Icon(imageVector = Icons.Default.Face,
         contentDescription = "图标示例1")
         
    Icon(painter= painterResource(id = R.mipmap.laugh),
         contentDescription = "图标示例2",
         tint = Color.Blue)
         
    Icon(bitmap = ImageBitmap.imageResource(id = R.mipmap.laugh),
         contentDescription = "图标示例3",
         tint=Color.Unspecified)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    tint设置图标的颜色，如果设置为Color.Unspecified表示不设置，则采用原来的颜色。

    四、选择器相关组件

    //复选按钮状态
       var checkedState by remember {
        mutableStateOf(false)
       }
  
       //复选框
       Row(verticalAlignment = Alignment.CenterVertically){
           Checkbox(checked = checkedState ,
               onCheckedChange ={it:Boolean->
                   checkedState = it
               },
               colors = CheckboxDefaults.colors(checkedColor = Color.Green))
           Text("复选框")
       }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述
    在这里插入图片描述

         var selectedState by remember {
        mutableStateOf(false)
      }
      //单选按钮
       var selectedColor = Color.Green
       Row(verticalAlignment = Alignment.CenterVertically){
           RadioButton(selected = selectedState,
               onClick = {
                    selectedState = !selectedState
               },
               colors = RadioButtonDefaults.colors(selectedColor = selectedColor))
           Text("单选按钮")
       }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    在这里插入图片描述

        //三相复选按钮状态
    val (triState1,onStateChange1) = remember { mutableStateOf(false) }
    val (triState2,onStateChange2) = remember { mutableStateOf(false) }
    val triState = remember(triState1,triState2){
        if(triState1 && triState2) ToggleableState.On
        else if (!triState1 && !triState2) ToggleableState.Off
        else ToggleableState.Indeterminate
    }
       //三相状态复选框
       Column(modifier = Modifier.fillMaxWidth()){
           Row(verticalAlignment = Alignment.CenterVertically){
               TriStateCheckbox(state = triState ,
                   onClick = {
                       val s = triState!=ToggleableState.On
                       onStateChange1(s)
                       onStateChange2(s)
                   },
                   colors = CheckboxDefaults.colors(checkedColor = MaterialTheme.colorScheme.primary))
               Text("三相状态复选框")
           }
           Column(modifier = Modifier.padding(10.dp)){
               Row(verticalAlignment = Alignment.CenterVertically) {
                   Checkbox(triState1, onStateChange1)
                   Text("选项1")
               }
               Row(verticalAlignment = Alignment.CenterVertically){
                   Checkbox(triState2,onStateChange2)
                   Text("选项2")
               }
           }
       }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    在这里插入图片描述

          //switch开关状态
       var openState by remember{ mutableStateOf(false) }
       //Switch单选开关
       Row(verticalAlignment = Alignment.CenterVertically){
           Switch(checked = openState,
               onCheckedChange = {it:Boolean->
                   openState = it
               },
               colors = SwitchDefaults.colors(disabledCheckedTrackColor = Color.DarkGray, checkedTrackColor = Color.Green))
           Text(if(openState) "打开" else "关闭")
       }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    在这里插入图片描述

         //sliderProgress值：进度条的值
      var sliderProgress by remember{ mutableStateOf(0f) }
       //定义Slider组件
       Column(horizontalAlignment = Alignment.CenterHorizontally){
           Slider(value = sliderProgress ,
                  onValueChange ={it:Float->
                    sliderProgress = it
                  },
                  colors = SliderDefaults.colors(activeTrackColor = Color.Green))
           Text(text = "进度：%.1f%%".format(sliderProgress*100))
       }
   }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    在这里插入图片描述
    拖方进度条，则类似如下显示：

    在这里插入图片描述

    五、定义对话框

        var openState2 by remember { mutableStateOf(true) }
    Column(modifier = Modifier.fillMaxSize()) {
        if(openState2){
            AlertDialog(onDismissRequest = {openState2 = !openState2},
                title = {
                    Text("警告对话框标题")
                },
                text={
                    Text("警告对话框内容")
                },
                confirmButton = {
                    TextButton(onClick={
                        openState2 = true
                    }){
                        Text("确定")
                    }
                },
                dismissButton = {
                    TextButton(onClick={
                        openState2 = false
                    }){
                        Text("取消")
                    }
                }
            )

        }
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    在这里插入图片描述

       var openState1 by remember{ mutableStateOf(true) }

    Column(modifier = Modifier.fillMaxSize()) {
        if(openState1){
            Dialog(onDismissRequest = {openState1 = !openState1}){
                Column(modifier = Modifier
                    .size(200.dp, 80.dp)
                    .background(Color.White)){
                    Text("对话框")
                    Button(onClick = {openState1 = !openState1}){
                        Text("关闭对话框")
                    }
                }
            }
        }
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在这里插入图片描述

  • 相关阅读:
    BOA服务器移植
    python基础语法(五)
    【CPP_Primer_Plus】学习助手
    SpringBoot中单元测试的使用
    Could not get unknown property ‘VERSION_1_8‘ for object of...
    智慧安防智能化发展趋势及解决方案
    手把手教你使用 Spring Boot 3 开发上线一个前后端分离的生产级系统（七） - Elasticsearch 8.2 集成与配置
    港科夜闻｜"香港科大2020十大准独角兽"开思完成2亿元D2,D3轮融资,推进汽后全产业链数字化转型...
    【C++】模拟实现二叉搜索树的增删查改功能
    asp.net 应用程序中同步方法调用异步方法无响应解决方法
  • 原文地址：https://blog.csdn.net/userhu2012/article/details/133393972