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中,可以省略(后面会说到)
- image
JUNFlex.item
.size(250, 250)
.image(@"test-image.jpeg") // 参数也可以是一个URL
.EOB;
- 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;
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