Skip to content

Commit d8c5753

Browse files
hackware1993hackware1993
committed
code refactor
1 parent 74dbcec commit d8c5753

35 files changed

+1649
-1283
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
# v1.4.0-stable
2+
3+
1. code refactoring, extracting non-core functions.
4+
2. add rotate support.
5+
16
# v1.3.0-stable
27

38
enhance base constraints.

‎README.md‎

Lines changed: 105 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ A super powerful Stack, build flexible layouts with constraints. Similar to Cons
66
Android and AutoLayout for iOS. But the code implementation is much more efficient, it has O(n)
77
layout time complexity and no linear equation solving is required.
88

9+
**It is a layout and a more modern general layout framework.**
10+
911
# Greatly improve Flutter development experience and efficiency. Improve application performance
1012

1113
No matter how complex the layout is and how deep the constraints are, it has almost the same
@@ -97,7 +99,7 @@ two-way constraints, such as chains(not yet supported, please use with Flex).
9799
6. bias(when there are constraints left and right or top and bottom, horizontalBias and verticalBias
98100
can be used to adjust the offset. The default value is 0.5, which means centering)
99101
7. z-index(drawing order, default is child index)
100-
8. translate
102+
8. translate、rotate
101103
9. percentage layout(when size is set to matchConstraint, the percentage layout will take effect,
102104
the default percentage is 1 (100%). The relevant properties are widthPercent, heightPercent,
103105
widthPercentageAnchor, heightPercentageAnchor)
@@ -183,12 +185,12 @@ dependencies:
183185
flutter_constraintlayout:
184186
git:
185187
url: 'https://github.com/hackware1993/Flutter-ConstraintLayout.git'
186-
ref: 'v1.3.0-stable'
188+
ref: 'v1.4.0-stable'
187189
```
188190
189191
```yaml
190192
dependencies:
191-
flutter_constraintlayout: ^1.3.0-stable
193+
flutter_constraintlayout: ^1.4.0-stable
192194
```
193195
194196
```dart
@@ -1026,6 +1028,96 @@ class PinnedPositionExampleState extends State<PinnedPositionExample> {
10261028
}
10271029
```
10281030

1031+
9. translate [Flutter Web Online Example](https://constraintlayout.flutterfirst.cn)
1032+
1033+
![translate.gif](https://github.com/hackware1993/flutter-constraintlayout/blob/master/translate.gif?raw=true)
1034+
1035+
```dart
1036+
class TranslateExampleState extends State<TranslateExample> {
1037+
late Timer timer;
1038+
int angle = 0;
1039+
1040+
@override
1041+
void initState() {
1042+
super.initState();
1043+
timer = Timer.periodic(const Duration(milliseconds: 16), (_) {
1044+
setState(() {
1045+
angle++;
1046+
angle %= 360;
1047+
});
1048+
});
1049+
}
1050+
1051+
@override
1052+
void dispose() {
1053+
super.dispose();
1054+
timer.cancel();
1055+
}
1056+
1057+
@override
1058+
Widget build(BuildContext context) {
1059+
ConstraintId anchor = ConstraintId('anchor');
1060+
return Scaffold(
1061+
appBar: const CustomAppBar(
1062+
title: 'Translate',
1063+
codePath: 'example/translate.dart',
1064+
),
1065+
body: ConstraintLayout(
1066+
children: [
1067+
Container(
1068+
color: Colors.yellow,
1069+
).applyConstraint(
1070+
id: anchor,
1071+
size: 150,
1072+
centerTo: parent,
1073+
),
1074+
Container(
1075+
decoration: const BoxDecoration(
1076+
color: Colors.red,
1077+
),
1078+
child: const Text('pinned translate'),
1079+
).applyConstraint(
1080+
size: wrapContent,
1081+
centerTo: anchor,
1082+
translate: PinnedTranslate(
1083+
PinnedInfo(
1084+
null,
1085+
Anchor(0.5, AnchorType.percent, 0.5, AnchorType.percent),
1086+
null,
1087+
angle: angle,
1088+
),
1089+
),
1090+
),
1091+
Container(
1092+
decoration: const BoxDecoration(
1093+
color: Colors.blue,
1094+
),
1095+
child: const Text('circle translate'),
1096+
).applyConstraint(
1097+
size: wrapContent,
1098+
centerTo: anchor,
1099+
translate: circleTranslate(
1100+
radius: 150,
1101+
angle: angle,
1102+
),
1103+
),
1104+
Container(
1105+
decoration: const BoxDecoration(
1106+
color: Colors.orange,
1107+
),
1108+
child: const Text('normal translate'),
1109+
).applyConstraint(
1110+
size: wrapContent,
1111+
outBottomCenterTo: anchor,
1112+
translate: Offset(0, angle / 5),
1113+
)
1114+
],
1115+
),
1116+
);
1117+
}
1118+
}
1119+
```
1120+
10291121
# Performance optimization
10301122

10311123
1. When the layout is complex, if the child elements need to be repainted frequently, it is
@@ -1203,6 +1295,16 @@ class ConstraintVersionExampleState extends State<ConstraintVersionExample> {
12031295
}
12041296
```
12051297

1298+
# Extension
1299+
1300+
ConstraintLayout's constraint-based layout algorithm is extremely powerful and flexible, and it
1301+
seems that it can become a general layout framework. You just need to generate constraints and hand
1302+
over the task of layout to ConstraintLayout. Some built-in features like circle position, staggered
1303+
grid, grid, and list are available in extended form.
1304+
1305+
The charts in the online example is a typical extension. Extensions for ConstraintLayout are
1306+
welcome.
1307+
12061308
# Support me
12071309

12081310
If it helps you a lot, consider sponsoring me a cup of milk tea, or giving a star. Your support is

‎README_CN.md‎

Lines changed: 102 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
一个超级强大的 Stack，使用约束构建极为灵活的布局，和 Android 下的 ConstraintLayout 和 iOS 下的 AutoLayout 类似。但代码实现却高效得多，它具有 O(n)
66
的布局时间复杂度，无需线性方程求解。
77

8+
它是一个布局，也是一个更现代化的通用布局框架。
9+
810
# 大幅提高 Flutter 的开发体验和效率，并提升应用性能
911

1012
不管布局有多复杂，约束有多深，它始终有媲美单一 Flex 或 Stack
@@ -76,7 +78,7 @@ build 耗时有时甚至超过渲染耗时。
7678
5. 完善的约束缺失、非法、冗余提示
7779
6. 偏移（当同时设置了上下或左右约束时，可以使用 horizontalBias 和 verticalBias 来调整偏移。默认值是 0.5，代表居中）
7880
7. z-index（绘制顺序，默认是子元素的顺序）
79-
8. 平移
81+
8. 平移、旋转
8082
9. 百分比布局（当大小被设置为 matchConstraint 时，就会启用百分比布局，默认的百分比是 1（100%）。相关的属性是
8183
widthPercent，heightPercent，widthPercentageAnchor，heightPercentageAnchor）
8284
10. 引导线
@@ -157,12 +159,12 @@ dependencies:
157159
flutter_constraintlayout:
158160
git:
159161
url: 'https://github.com/hackware1993/Flutter-ConstraintLayout.git'
160-
ref: 'v1.3.0-stable'
162+
ref: 'v1.4.0-stable'
161163
```
162164
163165
```yaml
164166
dependencies:
165-
flutter_constraintlayout: ^1.3.0-stable
167+
flutter_constraintlayout: ^1.4.0-stable
166168
```
167169
168170
```dart
@@ -1000,6 +1002,96 @@ class PinnedPositionExampleState extends State<PinnedPositionExample> {
10001002
}
10011003
```
10021004

1005+
9. 平移 [Flutter Web 在线示例](https://constraintlayout.flutterfirst.cn)
1006+
1007+
![translate.gif](https://github.com/hackware1993/flutter-constraintlayout/blob/master/translate.gif?raw=true)
1008+
1009+
```dart
1010+
class TranslateExampleState extends State<TranslateExample> {
1011+
late Timer timer;
1012+
int angle = 0;
1013+
1014+
@override
1015+
void initState() {
1016+
super.initState();
1017+
timer = Timer.periodic(const Duration(milliseconds: 16), (_) {
1018+
setState(() {
1019+
angle++;
1020+
angle %= 360;
1021+
});
1022+
});
1023+
}
1024+
1025+
@override
1026+
void dispose() {
1027+
super.dispose();
1028+
timer.cancel();
1029+
}
1030+
1031+
@override
1032+
Widget build(BuildContext context) {
1033+
ConstraintId anchor = ConstraintId('anchor');
1034+
return Scaffold(
1035+
appBar: const CustomAppBar(
1036+
title: 'Translate',
1037+
codePath: 'example/translate.dart',
1038+
),
1039+
body: ConstraintLayout(
1040+
children: [
1041+
Container(
1042+
color: Colors.yellow,
1043+
).applyConstraint(
1044+
id: anchor,
1045+
size: 150,
1046+
centerTo: parent,
1047+
),
1048+
Container(
1049+
decoration: const BoxDecoration(
1050+
color: Colors.red,
1051+
),
1052+
child: const Text('pinned translate'),
1053+
).applyConstraint(
1054+
size: wrapContent,
1055+
centerTo: anchor,
1056+
translate: PinnedTranslate(
1057+
PinnedInfo(
1058+
null,
1059+
Anchor(0.5, AnchorType.percent, 0.5, AnchorType.percent),
1060+
null,
1061+
angle: angle,
1062+
),
1063+
),
1064+
),
1065+
Container(
1066+
decoration: const BoxDecoration(
1067+
color: Colors.blue,
1068+
),
1069+
child: const Text('circle translate'),
1070+
).applyConstraint(
1071+
size: wrapContent,
1072+
centerTo: anchor,
1073+
translate: circleTranslate(
1074+
radius: 150,
1075+
angle: angle,
1076+
),
1077+
),
1078+
Container(
1079+
decoration: const BoxDecoration(
1080+
color: Colors.orange,
1081+
),
1082+
child: const Text('normal translate'),
1083+
).applyConstraint(
1084+
size: wrapContent,
1085+
outBottomCenterTo: anchor,
1086+
translate: Offset(0, angle / 5),
1087+
)
1088+
],
1089+
),
1090+
);
1091+
}
1092+
}
1093+
```
1094+
10031095
# 性能优化
10041096

10051097
1. 当布局复杂时，如果子元素需要频繁重绘，可以考虑使用 RepaintBoundary。当然合成 Layer 也有开销，所以需要合理使用。
@@ -1169,6 +1261,13 @@ class ConstraintVersionExampleState extends State<ConstraintVersionExample> {
11691261
}
11701262
```
11711263

1264+
# 扩展
1265+
1266+
ConstraintLayout 基于约束的布局算法极其强大和灵活，似乎可以成为了一个通用的布局框架。你只需要生成约束，将布局的任务交给 ConstraintLayout
1267+
即可。部分内置功能比如圆形定位、瀑布流、网格、列表以扩展的形式提供。
1268+
1269+
在线示例中的图表就是一个典型的扩展。欢迎为 ConstraintLayout 开发扩展。
1270+
11721271
# 支持我
11731272

11741273
如果它对你帮助很大，可以考虑赞助我一杯奶茶，或者给个 star。你的支持是我继续维护的动力。

‎example/arbitrary_position.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import 'dart:math';
22

33
import 'package:flutter/material.dart';
4-
import 'package:flutter_constraintlayout/src/constraint_layout.dart';
4+
import 'package:flutter_constraintlayout/flutter_constraintlayout.dart';
55

66
import 'custom_app_bar.dart';
77

‎example/badge.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import 'package:flutter/material.dart';
2-
import 'package:flutter_constraintlayout/src/constraint_layout.dart';
2+
import 'package:flutter_constraintlayout/flutter_constraintlayout.dart';
33

44
import 'custom_app_bar.dart';
55

‎example/barrier.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import 'package:flutter/material.dart';
2-
import 'package:flutter_constraintlayout/src/constraint_layout.dart';
2+
import 'package:flutter_constraintlayout/flutter_constraintlayout.dart';
33

44
import 'custom_app_bar.dart';
55

‎example/charts.dart‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import 'dart:collection';
22
import 'dart:math';
33

44
import 'package:flutter/material.dart';
5-
import 'package:flutter_constraintlayout/src/constraint_layout.dart';
5+
import 'package:flutter_constraintlayout/flutter_constraintlayout.dart';
66

77
import 'custom_app_bar.dart';
88

@@ -212,7 +212,7 @@ class ChartsState extends State<ChartsExample> {
212212
padding: const EdgeInsets.all(5),
213213
).applyConstraint(
214214
outTopCenterTo: cId('data$current').bottomMargin(65),
215-
),
215+
)
216216
],
217217
),
218218
scrollDirection: Axis.horizontal,

‎example/circle_position.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import 'dart:async';
22
import 'dart:math';
33

44
import 'package:flutter/material.dart';
5-
import 'package:flutter_constraintlayout/src/constraint_layout.dart';
5+
import 'package:flutter_constraintlayout/flutter_constraintlayout.dart';
66

77
import 'custom_app_bar.dart';
88

‎example/code.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import 'package:flutter/material.dart';
22
import 'package:flutter/services.dart';
3-
import 'package:flutter_constraintlayout/src/constraint_layout.dart';
3+
import 'package:flutter_constraintlayout/flutter_constraintlayout.dart';
44

55
import 'custom_app_bar.dart';
66

‎example/coming_soon.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import 'package:flutter/material.dart';
2-
import 'package:flutter_constraintlayout/src/constraint_layout.dart';
2+
import 'package:flutter_constraintlayout/flutter_constraintlayout.dart';
33

44
import 'custom_app_bar.dart';
55

0 commit comments

Comments
 (0)