当前位置： 首页 > article >正文

Andorid 学习 Compose UI（1）：Box

article 2025/2/23 14:37:51

今天学习和实验一下Android 的compose UI，写一些很小的Demo实验。下面和css 布局有点相似性。
如Box 看起来像html 当中的 div ，compose UI 提供Modifier 很多设置。你会发现Text,Box,Row,Image等组件 都有这个属性。我们处理任务包括对齐布局，颜色处理，背景添加，圆角处理，渐变色，点击交互。

1.如建立一个Box，实现对齐

package com.example.bleui.view

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Preview
@Composable
fun AboutScreen() {

    Box(modifier = Modifier.fillMaxSize().background(color = Color.White)){
        Box(modifier = Modifier
               .width(100.dp)
               .height(100.dp)
               .background(color = Color.Blue)
               .align(Alignment.BottomStart)
        )
        Box(modifier = Modifier
            .width(100.dp)
            .height(100.dp)
            .background(color = Color.Red)
            .align(Alignment.BottomEnd)
        )
    }
}

尽量简单一点。这个新建一个填充的Box，背景白色，在它内部新建2个box 然后在底部进行对齐。 .align(Alignment.BottomEnd) 这个地方是底部对齐靠右边。 .align(Alignment.BottomStart) 是底部靠左边。出来的效果如下图
在这里插入图片描述

2.实现左右对齐布局 Row

在内部添加一个Row 实现左右对齐。这种和css space-between 十分相似。

package com.example.bleui.view

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Preview
@Composable
fun AboutScreen() {

    Box(modifier = Modifier.fillMaxSize().background(color = Color.White)){

        Row (horizontalArrangement = Arrangement.SpaceBetween,
            modifier = Modifier.fillMaxWidth().border(1.dp, color = Color.Red)){
            Box(modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .background(color = Color.Yellow)
            )

            Box(modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .background(color = Color.Green)
            )
        }

        Box(modifier = Modifier
               .width(100.dp)
               .height(100.dp)
               .background(color = Color.Blue)
               .align(Alignment.BottomStart)
        )

        Box(modifier = Modifier
            .width(100.dp)
            .height(100.dp)
            .background(color = Color.Red)
            .align(Alignment.BottomEnd)
        )
    }
}

在这里插入图片描述

3.使用实现左右对齐布局 Box

package com.example.bleui.view

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Preview
@Composable
fun AboutScreen() {

    Box(modifier = Modifier.fillMaxSize().background(color = Color.White)){

        Row (horizontalArrangement = Arrangement.SpaceBetween,
            modifier = Modifier.fillMaxWidth().border(1.dp, color = Color.Red)){
            Box(modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .background(color = Color.Yellow)
            )

            Box(modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .background(color = Color.Green)
            )
        }

        Box (modifier = Modifier.fillMaxWidth().border(1.dp, color = Color.Blue)
            .padding(top = 100.dp))
        {
            Box(modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .background(color = Color.Yellow)
                .align(Alignment.TopStart)
            )

            Box(modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .background(color = Color.Green)
                .align(Alignment.TopEnd)
            )
        }



        Box(modifier = Modifier
               .width(100.dp)
               .height(100.dp)
               .background(color = Color.Blue)
               .align(Alignment.BottomStart)
        )

        Box(modifier = Modifier
            .width(100.dp)
            .height(100.dp)
            .background(color = Color.Red)
            .align(Alignment.BottomEnd)
        )
    }
}

在这里插入图片描述

出来的效果更加像绝对定位一样。左右两边布局可以通过Row 结合对齐SpaceBetween方式，或者Box 的对齐实现两边对齐的效果。

        Box (modifier = Modifier.fillMaxWidth()
            .offset(x = 0.dp, y = 200.dp)
            .border(1.dp, color = Color.Blue)
         )
        {
            Box(modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .background(color = Color.Yellow)
                .align(Alignment.TopStart)
            )

            Box(modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .background(color = Color.Green)
                .align(Alignment.TopEnd)
            )
        }

其中使用box 当中offsex 更像移动对应位置一下，像固定一样坐标移动。

  Box (modifier = Modifier.fillMaxWidth()
            .offset(x = 0.dp, y = 200.dp)
            .border(1.dp, color = Color.Blue)

使用Modifier设置的时候，有时候会有先后情况，如果将border 提前，放offset在后，绘制出来效果就不一样。这一点在实验过程会感觉到差别。

4. Box 里面添加文本

box 里面可以放置文本 会用到很多。

        Box (modifier = Modifier.fillMaxWidth()
            .offset(x = 0.dp, y = 200.dp)
            .border(1.dp, color = Color.Blue)
         )
        {
            Box(modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .background(color = Color.Yellow)
                .align(Alignment.TopStart)
            ){
                Text("A100")
            }

            Box(modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .background(color = Color.Green)
                .align(Alignment.TopEnd)
            ){
                Text("B100")
            }
        }

在这里插入图片描述

4.1 Box 里面的文本居中

尝试让文本居中 Modifier.align(Alignment.Center) 只要使用对齐方式进行对齐。Center 是水平和垂直居中。

        Box (modifier = Modifier.fillMaxWidth()
            .offset(x = 0.dp, y = 200.dp)
            .border(1.dp, color = Color.Blue)
         )
        {
            Box(modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .background(color = Color.Yellow)
                .align(Alignment.TopStart)
            ){
                Text("A100", modifier =
                Modifier.align(Alignment.Center))
            }

            Box(modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .background(color = Color.Green)
                .align(Alignment.TopEnd)
            ){
                Text("B100", modifier =
                Modifier.align(Alignment.Center))
            }
        }

由此可见，Alignment的方式可以方便对齐里面元素。
在这里插入图片描述

5. Box 里面添加点击交互

如果我们希望给Box添加交互点击，使用Modifier提供的clickable 实现点击出来。

        Box (modifier = Modifier.fillMaxWidth()
            .offset(x = 0.dp, y = 200.dp)
            .border(1.dp, color = Color.Blue)
            .clickable {
                println("click me")
            }
         )

在这里插入图片描述

6. Box 里面添加背景

日常当中希望可以添加背景元素。Box可以实现对应背景添加。使用Image引用对应的位图实现。在Box 里面第一个元素实现对应背景添加。

       Box (modifier = Modifier.fillMaxWidth()
            .offset(x = 0.dp, y = 200.dp)
            .border(1.dp, color = Color.Blue)
            .clickable {
                println("click me")
            }
         )
        {

            Image(
                painter = painterResource(id = R.mipmap.login_bg_1),  // 替换为你的图片资源
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier.fillMaxWidth().height(100.dp)
            )

            Box(modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .background(color = Color.Yellow)
                .align(Alignment.TopStart)
            ){
                Text("A100", modifier =
                Modifier.align(Alignment.Center))
            }

            Box(modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .background(color = Color.Green)
                .align(Alignment.TopEnd)
            ){
                Text("B100", modifier =
                Modifier.align(Alignment.Center))
            }
        }

在这里插入图片描述

7. Box的圆角处理

圆角处理是日常当中用得比较频繁。使用背景当中一个属性RoundedCornerShape 添加后背景就可以实现圆角效果。

            Box(modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .background(color = Color.Yellow,
                    shape = RoundedCornerShape(24.dp))
                .align(Alignment.TopStart)
            ){
                Text("A100", modifier =
                Modifier.align(Alignment.Center))
            }

在这里插入图片描述

8. Box的渐变色

使用background 当中linearGradient 处理

            Box(modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .background(
                    brush = Brush.linearGradient(
                        colors = listOf(Color.Blue, Color.Red),
                        start = Offset.Zero,
                        end =  Offset.Infinite
                    )
                )
                .align(Alignment.TopEnd)
            ){
                Text("B100", modifier =
                Modifier.align(Alignment.Center)

                )
            }

在这里插入图片描述

8. Box的渐变+圆角

使用clip 里面shape 属性，可以实现圆角效果。

            Box(modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .clip(shape = RoundedCornerShape(24.dp))
                .background(
                    brush = Brush.linearGradient(
                        colors = listOf(Color.Blue, Color.Red),
                        start = Offset.Zero,
                        end =  Offset.Infinite
                    )
                )
                .align(Alignment.TopEnd)
            ){
                Text("B100", modifier =
                Modifier.align(Alignment.Center)

                )
            }

在这里插入图片描述

Box 当中用到对齐，背景，颜色，渐变，描边，交互，都提供了对应处理。可以集中在Modifier 进行添加使用。今天的实验到此为止。


http://www.kler.cn/a/557618.html

相关文章：

  • C++跨平台开发：策略与实践在软件开发领域
  • SpringSecurity基于注解实现方法级别授权：@PreAuthorize、@PostAuthorize、@Secured
  • 图解JVM - 3.运行时数据区及程序计数器
  • Oracle定时执行计划任务
  • OmniParser V2 与 OmniTool：解锁计算机自动化操控的新境界
  • 【Arduino小项目】控制步进电机
  • Windows和Linux下，通过C++实现获取蓝牙版本号
  • 区块链讲解
  • 从零开始开发纯血鸿蒙应用之网页浏览
  • easelog(1)基础C++日志功能实现
  • javaSE学习笔记24-注解（annotation）
  • ASUS/华硕灵耀14 air UX5406SA 原厂Win11 24H2 家庭版系统 工厂文件 带ASUS Recovery恢复
  • 大语言模型微调的公开JSON数据
  • 请说明C#中的List是如何扩容的？
  • 分布式事务-本地消息表学习与落地方案
  • 计算机毕业设计Hadoop+Spark+DeepSeek-R1大模型民宿推荐系统 hive民宿可视化 民宿爬虫 大数据毕业设计(源码+LW文档+PPT+讲解)
  • Go并发编程陷阱：Goroutine泄露及其高效避免策略
  • DeepSeek写贪吃蛇手机小游戏
  • Java+SpringBoot+Vue+数据可视化的美食餐饮连锁店管理系统
  • RabbitMQ 消息队列的工作模式