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

Andorid 学习 Compose UI（1）：Box

news 来源：原创 2025/5/11 3:33:08

今天学习和实验一下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 进行添加使用。今天的实验到此为止。

相关文章：

  • sql function can not excute on QE slice 解决方案
  • 爬虫小案例豆瓣电影top250（json格式）
  • 如何将公钥正确添加到服务器的 authorized_keys 文件中以实现免密码 SSH 登录
  • 目标检测数据集-水果腐烂新鲜度检测数据集（适用YOLO全系列）
  • JavaScript函数-函数的参数
  • SQL表结构详解
  • ssh与服务器
  • 【AD】3-5 元件在原理图中的基本操作1
  • uniapp小程序自定义日历(签到、补签功能)
  • 《深度学习实战》第1集：深度学习基础回顾与框架选择
  • C++如何获取windows系统通知消息列表
  • 数据结构系列三：List+顺序表+ArrayList
  • langflow如何查看中间步骤的输出
  • 嵌入式硬件篇---数字电子技术中的时序逻辑
  • Unable to parse timestamp value: “20250220135445“, expected format is
  • Elasticsearch除了用作查找以外，还能可以做什么？
  • DAY08 List接口、Collections接口、Set接口
  • const 关键字在 C++ 中的应用
  • Cannot deserialize instance of java.lang.String out of START_ARRAY token
  • PDN目标阻抗的局限与恶劣波评估
  • 马上评丨学术不容“近亲繁殖”
  • 印巴战火LIVE丨印巴互相发动无人机袭击，巴官员称两国已在国安层面接触
  • 大四本科生已发14篇SCI论文？重庆大学：成立工作组核实
  • 两部门发布山洪灾害气象预警：北京西部、河北西部等局地山洪可能性较大
  • 深入贯彻中央八项规定精神学习教育中央第一指导组指导督导河北省见面会召开
  • “用鲜血和生命凝结的深厚情谊”——习近平主席署名文章中的中俄友好故事