MlnUI

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

一、新布局概述

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

二、HStack

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

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

HStack().bgColor(Color(220, 230, 200, 1))
            .subs(

            Label("评分4.5")
                    .textColor(Color(200, 0, 0, 0.6))
                    .fontSize(10)
    ,
            Label("月销量268")
                    .left(10)
                    .textColor(Color(120, 120, 120, 1))
                    .fontSize(10)
    ,
            Label("蜂鸟专送")
                    .textColor(Color(255, 255, 255, 1))
                    .bgColor(Color(100, 100, 200, 1))
                    .padding(3, 5, 3, 5)
                    .fontSize(10)
    )

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

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

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

HStack().bgColor(Color(220, 230, 200, 1))
            .mainAxisAlignment(MainAxisAlignment.START)
            .subs(

            Label("评分4.5")
                    .textColor(Color(200, 0, 0, 0.6))
                    .fontSize(10)
    ,
            Label("月销量268")
                    .left(10)
                    .textColor(Color(120, 120, 120, 1))
                    .fontSize(10)
    ,
            Label("蜂鸟专送")
                    .textColor(Color(255, 255, 255, 1))
                    .bgColor(Color(100, 100, 200, 1))
                    .padding(3, 5, 3, 5)
                    .fontSize(10)
    )