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

Compose(?/N) - 微件

article 2024/12/26 8:23:34

微件

微件也是组合函数，而不是以对象的形式提供。通过自定义的组合函数排列微件，并将数据更新到微件上。

文本 Text

Text(
        text = "Hello Word!", //显示的文本
        color = Color.Red, //文字颜色
        fontSize = 30.sp, //字号
// fontStyle = ? //字体样式（粗体、斜体）
        fontFamily = FontFamily.Serif, //字体
        fontWeight = FontWeight.Bold, //字重（粗细）
// letterSpacing = ? //用于与文本相关的维度值的单位
        textDecoration = null, //文字装饰（中划线，下划线）
        textAlign = TextAlign.Center, //对齐方式
// lineHeight = ? //行高
        overflow = TextOverflow.Ellipsis, //文字溢出(显示省略号)
        softWrap = true, //是否软换行
        maxLines = Int.MAX_VALUE, //最大行数
// onTextLayout = ?
// style = ?        //文本样式（阴影、偏移、模糊）

         onTextLayout = { }, //计算布局时回调
        modifier = Modifier
          .background(Color.Gray)
          .fillMaxWidth() //横向填充最大（相当于match_parent）
          .clickable { } //点击事件
)

图片 Image

Image(
// bitmap = ?
        painter = painterResource(id = R.drawable.logo_baidu), //图片资源
        contentDescription = null,        //无障碍提示文本信息，不需要可直接赋值null
        alignment = Alignment.Center, //对齐方式
        contentScale = ContentScale.Crop, //缩放比例
        alpha = 0.5f, //透明度
        colorFilter = null,        //将某种颜色应用到图片上
// filterQuality = FilterQuality.Low, //采样算法（默认低，bitmap来源才能用）
        modifier = Modifier
                .size(200.dp) //图片大小
          .clip(CircleShape) //剪裁成圆形

.border(2.dp, color = Color.Red, shape = CircleShap) //边框
)

//使用coil加载网络图片

AsyncImage(
model = "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
contentDescription = null
)

容器 Surface

对内容进行装饰。

fun Surface(

onClick: () -> Unit, //点击回调

modifier: Modifier = Modifier,

shape: Shape = RectangleShape, //形状

color: Color = MaterialTheme.colors.surface, //背景色（默认是主题中的surface颜色）

contentColor: Color = contentColorFor(color), //内容主色

border: BorderStroke? = null, //边框粗细和颜色

elevation: Dp = 0.dp, //高度（阴影效果）

shadowElevation = 0.dp, //阴影大小

tonalElevation = 0.dp, //当color=ColorScheme.surface时，值越大，浅色主题越深，深色主题越浅

content: @Composable () -> Unit

)

按钮 Button

fun Button(
onClick = { } //点击回调
modifier: Modifier = Modifier,
enabled = true, //是否启用
interactionSource = remember { MutableInteractionSource() },
elevation = ButtonDefaults.elevation(), //Z轴上的高度
shape = MaterialTheme.shapes.small, //形状（RoundedCorner圆角矩形、Circle圆形、CutCorner切角）
border = null, //外边框（Border(size: Dp, color: Color)）
colors = ButtonDefaults.buttonColors( //颜色（还有textButtonColors、outlineButtonColors）
containerColor = Color.Yellow,
contentColor = Color.Red,
disabledContainerColor = Color.Black,
disabledContentColor = Color.Green
),
contentPadding = ButtonDefaults.ContentPadding,
content: @Composable RowScope.() -> Unit
)

OutLinedButton：带外边框。

TextButton：普通的Button背景色是主题颜色，这个默认是透明