DeclarativeSugar 0.2.0

DeclarativeSugar 0.2.0

×

由 Darren Zheng 维护。

DeclarativeSugar 0.2.0

DeclarativeSugar

一个基于 Swift 和 UIStackView 的轻量级 Flutter 式声明性语法糖

中文介绍

0.Screenshot

与 Flutter 的比较

使用 playground

DeclarativeSugarPG.playground.

1.特性列表

  • 声明性 UI
  • 隐藏 UIStackView 的复杂性，使用类似 Flutter 的 API
  • 可组合视图层次结构与 UIStackView 相同
  • 入口函数 build() 和更新方法 rebuild()
  • Row/Column，Spacer
  • ListView（在 UIKit 中为 UITableView）#2019-08-03
  • Padding #2019-08-05
  • Center，SizedBox #2019-08-07
  • Stack，Row/Column 现在有可选的子项 [DZWidget?] #2019-08-08
  • Gesture，AppBar #2019-08-09

部署：iOS 9，Swift 5
依赖关系：UIKit（《无其他内容》）

但我建议使用 Then 来编写更干净的初始化器。

此封装的另一目标是消除对使用 SnapKit 或其他自动布局代码的需求。

为什么不使用 SwiftUI 呢？

如果您可以使用 SwiftUI，那么这个封装就是 多余的。

但 SwiftUI 需要 iOS 13+，如果您的项目以最小 iOS 9+ 为目标，DeclarativeSugar 就为您准备好了。

2.设置

2.1 继承 DeclarativeViewController 或 DeclarativeView

class ViewController: DeclarativeViewController {
    ...
}

2.2 提供您自己的视图层次结构

此视图将以全屏约束添加到 ViewController 的根视图中。

override func build() -> DZWidget {
    return ...
}

3.布局

3.1 行

水平布局视图。

DZRow(
    mainAxisAlignment: ... // UIStackView.Distribution
    crossAxisAlignment: ... // UIStackView.Alignment
    children: [
       ...
    ])

3.2 列

垂直布局视图。

DZColumn(
    mainAxisAlignment: ... // UIStackView.Distribution
    crossAxisAlignment: ... // UIStackView.Alignment
    children: [
       ...
    ])

3.3 内边距

为子控件设置内边距。

仅

 DZPadding(
    edgeInsets: DZEdgeInsets.only(left: 10, top: 8, right: 10, bottom: 8),
    child: UILabel().then { $0.text = "hello world" }
 ),

对称

 DZPadding(
    edgeInsets: DZEdgeInsets.symmetric(vertical: 10, horizontal: 20),
    child: UILabel().then { $0.text = "hello world" }
 ),

全部

 DZPadding(
    edgeInsets: DZEdgeInsets.all(16),
    child: UILabel().then { $0.text = "hello world" }
 ),

3.4 居中

等同于autolayout中的centerX和centerY。

DZCenter(
    child: UILabel().then { $0.text = "hello world" }
)

3.5 SizedBox

为子控件添加高度和宽度约束。

DZSizedBox(
    width: 50, 
    height: 50, 
    child: UIImageView(image: UIImage(named: "icon"))
)

3.6 Spacer

对于Row：它是一个具有宽度值的SizedBox。

DZRow(
    children: [
        ...
        DZSpacer(20), 
        ...
    ]
)

对于Column：它是一个具有高度值的SizedBox。

DZColumn(
    children: [
        ...
        DZSpacer(20), 
        ...
    ]
)

3.7 ListView

通常不需要处理代理/数据源模式和UITableViewCell。

静态ListView

 DZListView(
    tableView: UITableView(),
    sections: [
        DZSection(
            cells: [
                DZCell(
                    widget: ...,
                DZCell(
                    widget: ...,
            ]),
        DZSection(
            cells: [
                DZCell(widget: ...) }
            ])
    ])

动态ListView

使用rows:进行单节列表视图

DZListView(
    tableView: UITableView(),
    cells: ["a", "b", "c", "d", "e"].map { model in 
        DZCell(widget: UILabel().then { $0.text = model })
    }
)

3.8 Stack

Flutter中的堆叠组件替代品，不是UIStackView。

DZStack(
    edgeInsets: DZEdgeInsets.only(bottom: 40), 
    direction: .horizontal, // center direction
    base: YourViewBelow,
    target: YourViewAbove
)

3.9 手势

DZGestureDetector(
    onTap: { print("label tapped") },
    child: UILabel().then { $0.text = "Darren"}
)

DZGestureDetector(
    onTap: { print("button tapped") },
    child: UIButton().then {
        $0.setTitle("button", for: UIControl.State.normal)
        $0.setTitleColor(UIColor.red, for: UIControl.State.normal)
}),

3.10 AppBar

DZAppBar(
    title: "App Bar Title",
    child: ... 
)

4. 重新加载

4.1 更新状态（完全重置）

self.setState {
    self.hide = !self.hide
}

4.2 更新状态（增量）

UIView.animate(withDuration: 0.5) {
    // incremental reload
    self.hide = !self.hide
    self.context.setSpacing(self.hide ? 50 : 10, for: self.spacer)
    self.context.setHidden(self.hide, for: self.label)
}

5 代码结构

6 示例

要运行示例项目，请首先克隆仓库，然后从示例目录运行 pod install。

7 安装

DeclarativeSugar 通过 CocoaPods 提供。要安装它，只需将以下行添加到 Podfile 中

pod 'DeclarativeSugar'

8 作者

郑达然 [email protected]

9许可证

DeclarativeSugar可在MIT许可证下使用。有关更多信息，请参阅LICENSE文件。