Skip to content

Commit

Permalink
release v1.0.3-stable
Browse files Browse the repository at this point in the history
  • Loading branch information
hackw committed May 7, 2022
1 parent b084c7c commit 63ffe96
Show file tree
Hide file tree
Showing 4 changed files with 49 additions and 15 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
# v1.0.3-stable

reduced constraint computation time to 0.01 ms for normal complexity layouts(10 child elements), 80%
faster performance.

# v1.0.2-stable

optimize layout performance.
Expand Down
39 changes: 30 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,43 @@ No matter how complex the layout is and how deep the constraints are, it has alm
performance as a single Flex or Stack. When facing complex layouts, it provides better performance,
flexibility, and a very flat code hierarchy than Flex and Stack. Say no to 'nested hell'.

In short, once you use it, you can't go back.

Improving "nested hell" is one of my original intentions for developing Flutter ConstraintLayout,
but I don't advocate the ultimate pursuit of one level of nesting, which is unnecessary. So features
like chains are already well supported by Flex itself, so ConstraintLayout will not actively support
it.

View [Flutter Web Online Example](https://constraintlayout.flutterfirst.cn)

**Flutter ConstraintLayout has extremely high layout performance. It does not require linear
equations to solve. It is recommended to use ConstraintLayout at the top level. For extremely
complex layout(One thousand child elements, two thousand constraints), layout and drawing total time
within 5 milliseconds(debug mode on Windows 10,release mode take less time), the frame rate can be
easily reached 200 fps.**
equations to solve.** At any time, each child element will only be laid out once. When its own width
or height is set to wrapContent, some child elements may calculate the offset twice. The layout
process of ConstraintLayout consists of the following three steps:

1. Constraint calculation
2. Layout
3. Draw

The performance of layout and drawing is almost equivalent to a single Flex or Stack, and the
performance of constraint calculation is roughly 0.01 milliseconds (layout of general complexity, 20
child elements). Constraints are only recalculated after they have changed.

It is recommended to use ConstraintLayout at the top level. For extremely complex layout(one
thousand child elements, two thousand constraints), layout and drawing total time within 5
milliseconds(debug mode on Windows 10,release mode take less time), the frame rate can be easily
reached 200 fps.

**If not necessary, try to be relative to the parent layout, so that you can define less id. Or use
relative id.**

**Warning**:
For layout performance considerations, constraints are always one-way, and there should be no two
child elements directly or indirectly restrain each other. Each constraint should describe exactly
where the child elements are located. Although constraints can only be one-way, you can still better
handle things that were previously (Android ConstraintLayout) two-way constraints, such as chains.
child elements directly or indirectly restrain each other(for example, the right side of A is
constrained to the left side of B, and the left side of B is in turn constrained to A right). Each
constraint should describe exactly where the child elements are located. Although constraints can
only be one-way, you can still better handle things that were previously (Android ConstraintLayout)
two-way constraints, such as chains(not yet supported, please use with Flex).

Anyone who sends you a harassing message, you can send him Flutter code and use 'nested hell' to
insult him:
Expand Down Expand Up @@ -189,12 +210,12 @@ dependencies:
flutter_constraintlayout:
git:
url: 'https://github.com/hackware1993/Flutter-ConstraintLayout.git'
ref: 'v1.0.2-stable'
ref: 'v1.0.3-stable'
```
```yaml
dependencies:
flutter_constraintlayout: ^1.0.2-stable
flutter_constraintlayout: ^1.0.3-stable
```
```dart
Expand Down
18 changes: 13 additions & 5 deletions README_CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,17 @@ ConstraintLayout 不会积极支持它。

查看 [Flutter Web 在线示例](https://constraintlayout.flutterfirst.cn)

**Flutter ConstraintLayout 有极高的布局性能。它不基于 Cassowary 算法,无需线性方程求解。推荐在顶层使用
ConstraintLayout。对于极端复杂的布局(1000 个子元素,2000 个约束),非首帧布局和绘制的总耗时在 5 毫秒内(在 Windows 10
调试模式下,发布模式耗时更少),理论上首帧优势会更明显。对于常规复杂布局(50 个子元素,100 个约束),帧率可轻松达到 200 fps。**
**Flutter ConstraintLayout 有极高的布局性能。它不基于 Cassowary 算法,无需线性方程求解。** 任何时候,每一个子元素都只会被 layout
一次,当自身的宽或高被设置为 wrapContent 时,部分子元素可能会计算两次 offset。约束布局的布局过程包含以下三个步骤:

1. 约束计算
2. 布局
3. 绘制

其中布局和绘制的性能几乎与单一 Flex 或 Stack 相当,约束计算的性能大致为 0.01 毫秒(一般复杂度的布局,20 个子元素)。只有在约束变化后才会重新计算约束。

推荐在顶层使用 ConstraintLayout。对于极端复杂的布局(1000 个子元素,2000 个约束),非首帧布局和绘制的总耗时在 5 毫秒内(在 Windows 10
调试模式下,发布模式耗时更少),理论上首帧优势会更明显。对于常规复杂布局(50 个子元素,100 个约束),帧率可轻松达到 200 fps。

**如非必要,尽量相对于 parent 布局,这样可以定义更少的 id,或者使用相对 id。**

Expand Down Expand Up @@ -177,12 +185,12 @@ dependencies:
flutter_constraintlayout:
git:
url: 'https://github.com/hackware1993/Flutter-ConstraintLayout.git'
ref: 'v1.0.2-stable'
ref: 'v1.0.3-stable'
```
```yaml
dependencies:
flutter_constraintlayout: ^1.0.2-stable
flutter_constraintlayout: ^1.0.3-stable
```
```dart
Expand Down
2 changes: 1 addition & 1 deletion pubspec.yaml
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
name: flutter_constraintlayout
description: A super powerful Stack, build flexible layouts with constraints. Similar to ConstraintLayout for Android and AutoLayout for iOS. But the code implementation is much more efficient, it has O(n) layout time complexity and no linear equation solving is required.
version: 1.0.2-stable
version: 1.0.3-stable
anthor: hackware
homepage: https://github.com/hackware1993/Flutter-ConstraintLayout

Expand Down

0 comments on commit 63ffe96

Please sign in to comment.