MlnUI

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

新布局概述

分为以下几种布局，下面将通过demo示例逐步讲解。

1. HStack 横向线性布局
2. VStack 纵向线性布局
3. ZStack 层叠布局
4. Spacer 占位布局
5. Overlay 遮盖层

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(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。

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

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

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

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

CrossAxisAlignment.CENTER 向中心对齐。

CrossAxisAlignment.END 向结束方向对齐。

⚠️注意：MainAxisAlignment，CrossAxisAlignment会和现有子View的setGravity兼容，主轴上以HStack容器为主，交叉轴以子View的Gravity为主。

下面我们为demo中子view设置gravity来观察效果。

设置子view的gravity是LEFT或RIGHT，我们看到主轴生效的仍是MainAxisAlignment.END。

HStack().height(50)
            .crossAxisAlignment(CrossAxisAlignment.END)
            .mainAxisAlignment(MainAxisAlignment.END)
            .bgColor(Color(220, 230, 200, 1))
            .subs(
            mLabel("0元配送", Color(100, 100, 200, 0.8))
                    .gravity(Gravity.LEFT)--Gravity.RIGHT
    )

设置子view的gravity是TOP或CENTER，我们看到交叉轴生效的是子view的gravity。

HStack().height(50)
            .crossAxisAlignment(CrossAxisAlignment.END)
            .mainAxisAlignment(MainAxisAlignment.END)
            .bgColor(Color(220, 230, 200, 1))
            .subs(
            mLabel("0元配送", Color(100, 100, 200, 0.8))
                    .gravity(Gravity.TOP)--Gravity.CENTER
    )

4. wrap 布局显示暂时有问题，等开发修改后再编写。

5. ellipsize 布局显示暂时有问题，等开发修改后再编写。

总结：

1. 之前的LinearLayout想要实现类似等间隔布局，需要通过计算设置每个子view的margin值，现在直接设置HStack的MainAxisAlignment即可快速实现；
2. 之前的LinearLayout想要实现子view保持一致的对齐方式，需要为每个子view设置gravity，重复工作较多，现在直接设置HStack的MainAxisAlignment、CrossAxisAlignment即可快速实现；
3. wrap待总结
4. ellipsize待总结

VStack

ZStack

Spacer

Overlay