MlnUI

MLNUI推出新布局啦，快来体验吧～

一、新布局概述

分为以下几种布局，下面将通过demo示例逐步讲解。
1. HStack 横向线性布局 
2. VStack 纵向线性布局 
3. ZStack 层叠布局 
4. Spacer 占位布局 

二、HStack

HStack是横向线性布局，对于它而言，主轴即指水平方向，交叉轴指竖直方向。

1. 主轴上默认MATCH_PARENT撑满，交叉轴默认WRAP_CONTENT自适应。

mLabel(str, bgColor) {
    Label(str)
            .textColor(Color(255, 255, 255, 0.8))
            .padding(3, 5, 3, 5)
            .bgColor(bgColor)
            .fontSize(10)
}
---
--- UI
ui = {
    --- layout views
    HStack().bgColor(Color(220, 230, 200, 1))
            .subs(
            mLabel("0元配送", Color(100, 100, 200, 0.8))
    ,
            mLabel("支持自取", Color(100, 120, 200, 0.8))
    ,
            mLabel("食无忧", Color(140, 120, 200, 0.8))
    ,
            mLabel("津贴2元", Color(180, 150, 100, 0.8))
    ,
            mLabel("会员专享", Color(180, 100, 100, 0.8))
    ,
            mLabel("首单立减", Color(150, 60, 100, 0.8))
    )
}

2. 通过mainAxisAlignment、crossAxisAlignment设置子View的对齐方式。

通过mainAxisAlignment(int mainAxisAlignment)设置子view在主轴方向的对齐方式。参数是MainAxisAlignment枚举类型。

主轴默认是MainAxisAlignment.START 向起始方向对齐。

--demo1
mLabel(str, bgColor) {
    Label(str)
            .textColor(Color(255, 255, 255, 0.8))
            .padding(3, 5, 3, 5)
            .bgColor(bgColor)
            .fontSize(10)
}
---
--- UI
ui = {
    --- layout views
    HStack().mainAxisAlignment(MainAxisAlignment.START)
            .bgColor(Color(220, 230, 200, 1))
            .subs(
            mLabel("0元配送", Color(100, 100, 200, 0.8))
    ,
            mLabel("支持自取", Color(100, 120, 200, 0.8))
    ,
            mLabel("食无忧", Color(140, 120, 200, 0.8))
    ,
            mLabel("津贴2元", Color(180, 150, 100, 0.8))
    ,
            mLabel("会员专享", Color(180, 100, 100, 0.8))
    ,
            mLabel("首单立减", Color(150, 60, 100, 0.8))
    )
}

MainAxisAlignment.CENTER 向中心对齐。将demo1中MainAxisAlignment枚举值改为CENTER，ui显示如下

MainAxisAlignment.END 向结束方向对齐。将demo1中MainAxisAlignment枚举值改为END，ui显示如下

MainAxisAlignment.SPACE_BETWEEN 空闲区域在子view之间，等间距分布space，头尾不占space。

MainAxisAlignment.SPACE_AROUND 空闲区域在子view之间，等间距分布space，头尾各占1/2space。

MainAxisAlignment.SPACE_EVENLY 空闲区域在子view之间，等间距分布space，头尾各占1space。

通过crossAxisAlignment(int crossAxisAlignment)设置子view在交叉轴方向的对齐方式。当子View的高度小于HStack的高度时才有意义。参数是CrossAxisAlignment枚举类型。

上述demo1中，我们为HStack设置一个固定高度，来观察CrossAxisAlignment的枚举效果。

交叉轴默认是CrossAxisAlignment.START 向起始方向对齐。

HStack().height(50)
            .crossAxisAlignment(CrossAxisAlignment.START)

CrossAxisAlignment.CENTER 向中心对齐。

CrossAxisAlignment.END 向结束方向对齐。