A lightweight Flutter-flavor declarative syntax sugar based on Swift and UIStackView
Comparing to Flutter
Using playground
DeclarativeSugarPG.playground
.
- Declarative UI
- Hide
UIStackView
complexity, use Flutter-ish API instead - composable view-hierachy as same as
UIStackView
- entry point
build()
and update methodrebuild()
-
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.
class ViewController: DeclarativeViewController {
...
}
This view will be added to ViewController
's root view with full screen constraints.
override func build() -> DZWidget {
return ...
}
Layout views horizontally.
DZRow(
mainAxisAlignment: ... // UIStackView.Distribution
crossAxisAlignment: ... // UIStackView.Alignment
children: [
...
])
Layout views vertically.
DZColumn(
mainAxisAlignment: ... // UIStackView.Distribution
crossAxisAlignment: ... // UIStackView.Alignment
children: [
...
])
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" }
),
Equivalent to centerX and centerY in autolayout.
DZCenter(
child: UILabel().then { $0.text = "hello world" }
)
Adding height and width constraints to the child.
DZSizedBox(
width: 50,
height: 50,
child: UIImageView(image: UIImage(named: "icon"))
)
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),
...
]
)
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 })
}
)
A Flutter stack replacement, not UIStackView
.
DZStack(
edgeInsets: DZEdgeInsets.only(bottom: 40),
direction: .horizontal, // center direction
base: YourViewBelow,
target: YourViewAbove
)
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)
}),
DZAppBar(
title: "App Bar Title",
child: ...
)
self.setState {
self.hide = !self.hide
}
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)
}
To run the example project, clone the repo, and run pod install
from the Example directory first.
DeclarativeSugar is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod 'DeclarativeSugar'
Darren Zheng [email protected]
DeclarativeSugar is available under the MIT license. See the LICENSE file for more info.