Andorid 学习 Compose UI（1）：Box

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

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

package com.example.bleui.viewimport 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.viewimport 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.viewimport 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))}