A lightweight Flutter-flavor declarative syntax sugar based on Swift and UIStackView
Comparing to Flutter
Using playground
DeclarativeSugarPG.playground.
- Declarative UI
- Hide
UIStackViewcomplexity, use Flutter-ish API instead - composable view-hierachy as same as
UIStackView - entry point
build()and update methodrebuild() -
Row/Column,Spacer -
ListView(UITableViewin UIKit) #2019年08月03日 -
Padding#2019年08月05日 -
Center,SizedBox#2019年08月07日 -
Stack,Row/Columnnow 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 623767307@qq.com
DeclarativeSugar is available under the MIT license. See the LICENSE file for more info.