docs

tripolskypetr · Jul 3, 2019 · 677a128 · 677a128
1 parent d57e635
commit 677a128
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 1 deletion.
diff --git a/Readme.md b/Readme.md
@@ -0,0 +1,40 @@
+# QML flex layout
+
+Qt quick layout system is real ugly. It would be much more convenient to use flexbox for positioning elements. This repository contains a set of qt quick bindings to the [Yoga](https://github.com/facebook/yoga) layout engine from React Native for rendering flexbox.
+
+![Screenshot](docs/screenshot.png)
+
+```
+import QtQuick 2.5
+import QtQuick.Window 2.0
+
+Window {
+    visible: true
+    height: 400
+    width: 675
+    Rectangle {
+        anchors.fill: parent
+        color: "cyan"
+        Flex {
+            height: parent.height
+            width: parent.width
+            
+            flexDirection: "row"
+            flexWrap: "wrap"
+            justifyContent: "spaceAround"
+            alignItems: "center"
+            alignSelf: "center"
+            alignContent: "stretch"
+
+            Rectangle { color: "green"; height: 150; width: 150 }
+            Rectangle { color: "green"; height: 150; width: 150 }
+            Rectangle { color: "green"; height: 150; width: 150 }
+            Rectangle { color: "green"; height: 150; width: 150 }
+            Rectangle { color: "green"; height: 150; width: 150 }
+            Rectangle { color: "green"; height: 150; width: 150 }
+            Rectangle { color: "green"; height: 150; width: 150 }
+        }
+    }
+}
+
+```
diff --git a/docs/screenshot.png b/docs/screenshot.png
diff --git a/qml/example.qml b/qml/example.qml
@@ -17,7 +17,6 @@ Window {
             alignItems: "center"
             alignSelf: "center"
             alignContent: "stretch"
-            flexShrink: 10
             Rectangle { color: "green"; height: 150; width: 150 }
             Rectangle { color: "green"; height: 150; width: 150 }
             Rectangle { color: "green"; height: 150; width: 150 }