DeclarativeSugar

A lightweight Flutter-flavor declarative syntax sugar based on Swift and UIStackView

中文介绍

0.Screenshot

Comparing to Flutter

Using playground

DeclarativeSugarPG.playground.

1.Feature List

• Declarative UI
• Hide UIStackView complexity, use Flutter-ish API instead
• composable view-hierachy as same as UIStackView
• entry point build() and update method rebuild()
• Row/Column, Spacer
• ListView (UITableView in UIKit) #2019-08-03
• Padding #2019-08-05
• Center, SizedBox #2019-08-07
• Stack, Row/Column now has nullable children [DZWidget?] #2019-08-08
• Gesture, AppBar #2019-08-09

Depolyment: iOS 9, Swift 5
Dependency: UIKit (nothing else)

But I would suggest using Then for writing cleaner initializer.

The other goal of this wrapper is to remove the needs of using SnapKit or other autolayout codes.

Why not using SwiftUI?

If you can use SwiftUI, then this wrapper is redundant.

But SwiftUI requires iOS 13+, if your project targets minimal iOS 9+, DeclarativeSugar is here for you.

2.Setup

2.1 Inherite DeclarativeViewController or DeclarativeView

class ViewController: DeclarativeViewController {
    ...
}

2.2 Provide your own view-hierachy

This view will be added to ViewController's root view with full screen constraints.

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

3.Layout

3.1 Row

Layout views horizontally.

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

3.2 Column

Layout views vertically.

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

3.3 Padding

Set padding for child widget.

only

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

symmetric

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

all

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

3.4 Center

Equivalent to centerX and centerY in autolayout.

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

3.5 SizedBox

Adding height and width constraints to the child.

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

3.6 Spacer

For Row: it is a SizedBox with width value.

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

For Column: it is a SizedBox with height value.

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

3.7 ListView

Generally, you don't need to deal with delegate/datasource pattern and UITableViewCell

Static ListView

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

Dynamic ListView

Using rows: for single section list view

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

3.8 Stack

A Flutter stack replacement, not UIStackView.

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

3.9 Gesture

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. Reloading

4.1 Update state (reset completely)

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

4.2 Update state (incremental)

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 Code Structure

6 Example

To run the example project, clone the repo, and run pod install from the Example directory first.

7 Installation

DeclarativeSugar is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'DeclarativeSugar'

8 Author

Darren Zheng [email protected]

9 License

DeclarativeSugar is available under the MIT license. See the LICENSE file for more info.