JUNFlex，基于Objective-C实现快速布局的UI框架，iOS开发

VIP文章 Jun2786184671

已于 2022-12-10 18:24:51 修改

阅读量260

点赞数

文章标签： ios ui objective-c

于 2022-12-10 15:54:00 首次发布

本文链接：https://blog.csdn.net/qq_30010675/article/details/128265948

版权

GitHub仓库：https://github.com/Jun2786184671/JUNFlex 记得给作者本人🌟

写在前面：

前些时间，本人实习的公司需要一个基于json实现ui可配置化的objc框架。但因当时本人技术储备有限，以及缺乏灵感等种种原因，很长一段时间未能想到如何较好地设计这个框架。后续接触了flutter和通过前端技术的学习，就想着能否用objc也实现类似的声明式ui编程，或者是一种基于objc的dsl。最后在两周前的周日下午，终于有了些想法，现在框架已经在测试环境下按预期工作了。。>_<

框架简述：

JUNFlex提供了以下几个组件实现快速的弹性布局：Hstack，Vstack，Zstack，Padding，Item，List。

1. 先介绍Item，它可以用来快速创建各种类型的view，比如:

label

JUNFlex.item
.text(@"hello world", [UIFont systemFontOfSize:40], UIColor.blackColor)
.EOB; // End Of Build, 如果Item构建环境在Stack或Padding中，可以省略（后面会说到）

Simulator Screen Shot - iPhone 14 Pro - 2022-12-10 at 00.04.49.png

image

JUNFlex.item
.size(250, 250)
.image(@"test-image.jpeg")  // 参数也可以是一个URL
.EOB;

Simulator Screen Shot - iPhone 14 Pro - 2022-12-10 at 00.01.09.png

button

JUNFlex.item
.width(80)
.height(44)
.radius(10)
.color(UIColor.whiteColor)
.border(3, UIColor.blueColor)
.text(@"Click me!",
    [UIFont systemFontOfSize:30], 
    UIColor.blueColor)
.onTap(self, @selector(buttonOnClick:))
.EOB;

Simulator Screen Shot - iPhone 14 Pro - 2022-12-09 at 23.54.54.png

2. Hstack是一个横向布局，所有被它包裹住的view都会横向等距排列。

JUNFlex.hstack
.children(@[
    JUNFlex.item
    .height(30)
    .color(UIColor.cyanColor)
    .text(@"hello world", 
        [UIFont systemFontOfSize:20], 
        UIColor.blackColor),

    JUNFlex.item
    .size(100, 100)
    .image(@"test-image.jpeg"),

    JUNFlex.item
    .width(80)
    .height(44)
    .radius(10)
    .color(UIColor.whiteColor)
    .border(3, UIColor.blueColor)
    .text(@"Click me!", 
        [UIFont systemFontOfSize