Android Jetpack Compose 第一章Layout-第一节-LayoutModifier在介绍基本布局L

Compose交流群 235965504

该系列不会讲解基本的Compose用法只是用来记录各种API的使用

入门Compose 请直达右拐官网 Jetpack Compose

在介绍基本布局Layout之前我们需要介绍一下Modifier(翻译过来就是修饰符的意思).
有了Modifier修饰布局,我们才能确定一个布局的大小,padding,横纵比等
由于本章只会介绍布局相关的API,所以只介绍Modifier的子类LayoutModifier LayoutModifier派生子类包括了

LayoutWidth
LayoutHeight
LayoutOffset
LayoutPadding
LayoutAspectRatio
LayoutSize
API官网地址
下面依次介绍每个Modifier的用法

LayoutWidth & LayoutHeight

两者的API一模一样一个确定宽度一个确定高度不必多说

data class LayoutWidth(val width: Dp)
data class LayoutHeight(val height: Dp)

参数是以DP作为单位假设我们要一个高度为20dp 宽度为30dp的Modifier
即

LayoutWeight(30.dp)
LayoutHeight(20.dp)

假如我们需要一个占据屏幕整个宽度的大小我们怎么办呢？
这时候需要LayoutWeight/LayoutHeight中已有的单例对象 Fill

LayoutWidth.Fill//宽度占满整个屏幕
LayoutHeight.Fill//高度占满整个屏幕

假如我们需要宽度有一个最小值或者最大值
这时候需要LayoutWidth中的内部数据类Min,Max

LayoutWidth.Min(20.dp)//约束最小值为20DP
LayoutWidth.Max(30.dp)//约束最大值为30DP

请注意上面的Max和Min只约束了一个方向的值(要么是Min,要么是Max)
若想同时约束Min和Max 请使用Constrain内部数据类

LayoutWidth.Constrain(10.dp,20.dp)//最小值为10DP 最大值为20DP

LayoutSize

LayoutSize是LayoutWidth和LayoutHeight的结合体
先看构造函数

data class LayoutSize(val width: Dp, val height: Dp)//宽度,高度
data class LayoutSize(val size: Dp)//宽度和高度都是size 一个正方形

同样有Fill单例对象表明宽度和高度占据整个屏幕大小

LayoutSize.Fill

Min,Max约束(最小宽度和最小高度),(最大宽度和最大高度) 单方向约束

data class Min(val minWidth: Dp, val minHeight: Dp)
data class Min(val minSize: Dp)

Constrain约束四个值

data class Constrain(
        val minWidth: Dp,
        val minHeight: Dp,
        val maxWidth: Dp,
        val maxHeight: Dp
    )

LayoutOffset

假如我们需要从(0,0) --- 偏移到 -->(10,20),我们可以使用

LayoutOffset(10.dp,20.dp) //两个参数可正可负

LayoutPadding

Padding即Android中常用的内边距

data class LayoutPadding(
    val start: Dp = 0.dp,//距离屏幕左边的padding
    val top: Dp = 0.dp,//距离屏幕顶部的padding
    val end: Dp = 0.dp,//距离屏幕右边的padding
    val bottom: Dp = 0.dp//距离屏幕底部的padding
) 
fun LayoutPadding(all: Dp)//傻瓜式函数 上下左右padding一样

LayoutAspectRatio

AspectRatio的意思为横纵比 所以这个类的作用也很清晰明白

data class LayoutAspectRatio(val aspectRatio: Float)//横纵比为浮点数

假设我们需要一个宽度:高度为 2:1 的矩形

LayoutAspectRatio(2f)

以上就是所有的LayoutModifier
下一节讲解Layout布局中的Arrangement 点我跳转

Android Jetpack Compose 第一章Layout-第一节-LayoutModifier