Skip to content

起步

Jump to bottom
xuwhale6 edited this page Jan 21, 2021 · 31 revisions

引言

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

一、界面组成

1.UI布局

ui{
    --layout views
    --在这里编写声明式布局、放置控件和设置属性等
}

2.preview构造数据源

local function preview()
    --在这里初始化数据
end

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

  • 子模块：ArgoUI的内联函数，方便实现UI模块的复用；
  • 样式表：类似CSS样式表；
  • model:通过把model和UI绑定，可以用数据驱动UI刷新；

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

1.model声明

  • 声明一个名为weChatData的model
model(weChatData)

2.在preview中为我们声明的model构造数据，在进行数据绑定时，通过[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

3.定义头像和等级的子模块 

--子模块参数涉及model时，需使用mark_data标记
mIcon(mark_data(item)) {
    VStack().subs(
        ImageView(item.iconUrl).style(Style.iconImg),
        Label(tostring(item.level)).style(Style.iconLevel)
    ).crossAxis(CrossAxis.CENTER)
}

--在UI布局中进行调用，运行效果如下图所示
--- UI
ui {
    --- layout views
    mIcon()
}

firstdemo1

4.定义样式表 

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)
    }
}

5.定义列表的cell样式 

infoCell(mark_data(item)) {
    VStack()
    .widthPercent(90)
    .subs(
        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)

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

--在ui中为List绑定cell，运行效果图如下
--- UI
ui{
   --- layout views
    List(weChatData.list)
    .bindCell(function(item)
        return infoCell(item)
    end)
}

firstdemo2

6.在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(0).grow(1)
}


点击查看完整demo 
model(weChatData)

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)
    }
}

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

infoCell(mark_data(item)) {
    VStack()
    .widthPercent(90)
    .subs(
        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)

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

}

---
--- UI
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(0).grow(1)
}

---
--- preview
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
  • 附：运行效果图，可实现基本的点赞功能。编辑代码时可在模拟器中及时操作动态界面，快去动手试试吧！

weChatShow

MLN

MLN快速上手

MLN进阶

API

ArgoUI

ArgoUI教程

API

最佳实践

例子

特殊问题

ArgoKit

ArgoKit教程

API

Clone this wiki locally