起步

引言

ArgoUI作为一种高性能、小巧的开发框架，支持声明式开发和数据绑定技术，编程操作简单，代码简洁易维护。 
现在让我们通过一个简单小例子来开始ArgoUI的学习之路吧！

一、界面组成

1.UI布局

ui{
    --layout views
    --在这里编写声明式布局以及控件属性等
}

2.preview展示

local function preview()
    --在这里存放我们需要传递的数据
end

3.在UI布局和preview外面可以定义我们需要的model、标签、样式表和子模块等

二、一个简单的朋友圈界面

1.model声明

• 通过声明一个名为weChatData的model来对一系列的数据进行打包，通过[model名].[属性名]来进行调用

model(weChatData)

2.定义头像的子模块

mIcon(item) {
    VStack().subs(
        ImageView(item.iconUrl).style(Style.iconImg),
        Label(tostring(item.level)).style(Style.iconLevel)
    ).crossAxis(CrossAxis.CENTER)
}

3.定义样式表

local Style = {
    cellContentImg = {
        height(100),width(150),       
	  contentMode(ContentMode.SCALE_ASPECT_FILL),
        paddingTop(20)
    },
    cellName = {
        textColor(Color(0, 154, 205, 1)),fontSize(18)
    },
    cellContent = {
        fontSize(16),paddingTop(10)
    },
    cellFavorite = {
        height(20),width(20),crossSelf(CrossAxis.END)
    },
    iconImg = {
        height(50),width(50)
    },
    iconLevel = {
        fontSize(12),bgColor(Color(183, 223, 127)),
        padding(2,8,2,8),cornerRadius(7.5),top(2)
    }
}

4.定义cell样式，List绑定的数据源会遍历返回给item，并将item的值赋给cell

infoCell(item) {
    HStack()
    .widthPercent(100)
    .padding(20, 20, 3, 10)
    .subs(
        mIcon(item)
        ,
        VStack().left(20)
        .subs(
            Label(item.name).style(Style.cellName)
            ,
            Label(item.content).style(Style.cellContent).lines(6)
            ,
            ImageView(item.img).style(Style.cellContentImg).display(item.type == 1)
        ).shrink(1)

    )
    ,
    VStack()
    .widthPercent(90)
    .subs(
        ImageView((item.show and {weChatData.CheckedUrl} or {weChatData.unCheckedUrl})[1])
        .style(Style.cellFavorite).crossSelf(CrossAxis.END)
        .onClick(
            function()
                item.show.toggle()
            end
        )
    )

}

5.在UI中放置朋友圈背景图片，并构造List()以列表的形式显示每一条朋友圈动态

ui {
    --- layout views
    ImageView(weChatData.background)
    .heightPercent(30)
    .widthPercent(100)
    .contentMode(ContentMode.SCALE_ASPECT_FILL)
    ,
    List(weChatData.list)
    .bindCell(function(item)
        return infoCell(item)
    end).basis(1)
}

6.在preview中为我们声明的model绑定数据，以供调用

local function preview()

    weChatData.background = "https://s.momocdn.com/w/u/others/custom/MLNUI/background.jpg"

    weChatData.list = {
        {
            type = 1,
            iconUrl = "https://s.momocdn.com/w/u/others/custom/MLNUI/case5.png",
            name = "小小花",
            content = "从明天开始，做一个幸福的人",
            img = "https://s.momocdn.com/w/u/others/custom/MLNUI/naicha.jpg",
            level = 18,
            show = false
        },
        {
            type = 2,
            iconUrl = "https://s.momocdn.com/w/u/others/custom/MLNUI/case4.png",
            name = "小小峰",
            content = "玉枕佳人绮罗裙。将军令，勒石燕然。少年重帘黄粱梦，起坐思量待天明。昨夜星辰，昨夜风今宵酒，今宵梦，何处醒？可有春风得意马蹄疾；还能一日看尽长安花？青春早为，人无长少年。",
            img = "https://s.momocdn.com/w/u/others/custom/MLNUI/bg1.jpg",
            level = 10,
            show = false
        }
    }

    weChatData.unCheckedUrl = "https://s.momocdn.com/w/u/others/custom/MLNUI/unChecked.png"
    weChatData.CheckedUrl = "https://s.momocdn.com/w/u/others/custom/MLNUI/Checked.png"

end

<details>
<summary>点击查看完整demo</summary>

</details>

附：运行效果图，可实现基本的点赞功能