Skip to content

Commit

Permalink
optimize rotate
Browse files Browse the repository at this point in the history
  • Loading branch information
= committed May 14, 2022
1 parent f37846d commit 14df02d
Show file tree
Hide file tree
Showing 9 changed files with 220 additions and 49 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
# v1.4.4-stable

optimize rotate.

# v1.4.3-stable

fix a pinned position bug.
Expand Down
93 changes: 83 additions & 10 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,12 +185,12 @@ dependencies:
flutter_constraintlayout:
git:
url: 'https://github.com/hackware1993/Flutter-ConstraintLayout.git'
ref: 'v1.4.3-stable'
ref: 'v1.4.4-stable'
```
```yaml
dependencies:
flutter_constraintlayout: ^1.4.3-stable
flutter_constraintlayout: ^1.4.4-stable
```
```dart
Expand Down Expand Up @@ -925,15 +925,14 @@ class MarginExample extends StatelessWidget {
```dart
class PinnedPositionExampleState extends State<PinnedPositionExample> {
late Timer timer;
int angle = 0;
double angle = 0;
@override
void initState() {
super.initState();
timer = Timer.periodic(const Duration(milliseconds: 16), (_) {
setState(() {
angle++;
angle %= 360;
});
});
}
Expand Down Expand Up @@ -1035,15 +1034,16 @@ class PinnedPositionExampleState extends State<PinnedPositionExample> {
```dart
class TranslateExampleState extends State<TranslateExample> {
late Timer timer;
int angle = 0;
double angle = 0;
double earthRevolutionAngle = 0;
@override
void initState() {
super.initState();
timer = Timer.periodic(const Duration(milliseconds: 16), (_) {
setState(() {
angle++;
angle %= 360;
angle += 1;
earthRevolutionAngle += 0.1;
});
});
}
Expand All @@ -1064,12 +1064,85 @@ class TranslateExampleState extends State<TranslateExample> {
),
body: ConstraintLayout(
children: [
Container(
decoration: const BoxDecoration(
color: Colors.redAccent,
borderRadius: BorderRadius.all(Radius.circular(1000)),
),
child: const Text('----'),
alignment: Alignment.center,
).applyConstraint(
id: cId('sun'),
size: 200,
pinnedInfo: PinnedInfo(
parent,
Anchor(0.5, AnchorType.percent, 0.5, AnchorType.percent),
Anchor(0.3, AnchorType.percent, 0.5, AnchorType.percent),
angle: earthRevolutionAngle * 365 / 25.4,
),
),
Container(
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(1000)),
),
child: const Text('----'),
alignment: Alignment.center,
).applyConstraint(
id: cId('earth'),
size: 100,
pinnedInfo: PinnedInfo(
cId('sun'),
Anchor(0.5, AnchorType.percent, 0.5, AnchorType.percent),
Anchor(0.5, AnchorType.percent, 0.5, AnchorType.percent),
angle: earthRevolutionAngle * 365,
),
translate: circleTranslate(
radius: 250,
angle: earthRevolutionAngle,
),
translateConstraint: true,
),
Container(
decoration: const BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.all(Radius.circular(1000)),
),
child: const Text('----'),
alignment: Alignment.center,
).applyConstraint(
id: cId('moon'),
size: 50,
pinnedInfo: PinnedInfo(
cId('earth'),
Anchor(0.5, AnchorType.percent, 0.5, AnchorType.percent),
Anchor(0.5, AnchorType.percent, 0.5, AnchorType.percent),
angle: earthRevolutionAngle * 365 / 27.32,
),
translate: circleTranslate(
radius: 100,
angle: earthRevolutionAngle * 365 / 27.32,
),
translateConstraint: true,
),
Text('Sun rotates ${(earthRevolutionAngle * 365 / 25.4) ~/ 360} times')
.applyConstraint(
outTopCenterTo: cId('sun'),
),
Text('Earth rotates ${earthRevolutionAngle * 365 ~/ 360} times')
.applyConstraint(
outTopCenterTo: cId('earth'),
),
Text('Moon rotates ${(earthRevolutionAngle * 365 / 27.32) ~/ 360} times')
.applyConstraint(
outTopCenterTo: cId('moon'),
),
Container(
color: Colors.yellow,
).applyConstraint(
id: anchor,
size: 150,
centerTo: parent,
size: 250,
centerRightTo: parent.rightMargin(300),
),
Container(
color: Colors.red,
Expand Down Expand Up @@ -1256,7 +1329,7 @@ class BarrierExample extends StatelessWidget {

5. Every frame, ConstraintLayout compares the parameters and decides the following things:
1. Does the constraint need to be recalculated?
2. Does it need to be rearranged?
2. Does it need to be relayout?
3. Does it need to be redrawn?
4. Do you need to rearrange the drawing order?
5. Do you need to rearrange the order of event distribution?
Expand Down
91 changes: 82 additions & 9 deletions README_CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,12 +159,12 @@ dependencies:
flutter_constraintlayout:
git:
url: 'https://github.com/hackware1993/Flutter-ConstraintLayout.git'
ref: 'v1.4.3-stable'
ref: 'v1.4.4-stable'
```
```yaml
dependencies:
flutter_constraintlayout: ^1.4.3-stable
flutter_constraintlayout: ^1.4.4-stable
```
```dart
Expand Down Expand Up @@ -899,15 +899,14 @@ class MarginExample extends StatelessWidget {
```dart
class PinnedPositionExampleState extends State<PinnedPositionExample> {
late Timer timer;
int angle = 0;
double angle = 0;
@override
void initState() {
super.initState();
timer = Timer.periodic(const Duration(milliseconds: 16), (_) {
setState(() {
angle++;
angle %= 360;
});
});
}
Expand Down Expand Up @@ -1009,15 +1008,16 @@ class PinnedPositionExampleState extends State<PinnedPositionExample> {
```dart
class TranslateExampleState extends State<TranslateExample> {
late Timer timer;
int angle = 0;
double angle = 0;
double earthRevolutionAngle = 0;
@override
void initState() {
super.initState();
timer = Timer.periodic(const Duration(milliseconds: 16), (_) {
setState(() {
angle++;
angle %= 360;
angle += 1;
earthRevolutionAngle += 0.1;
});
});
}
Expand All @@ -1038,12 +1038,85 @@ class TranslateExampleState extends State<TranslateExample> {
),
body: ConstraintLayout(
children: [
Container(
decoration: const BoxDecoration(
color: Colors.redAccent,
borderRadius: BorderRadius.all(Radius.circular(1000)),
),
child: const Text('----'),
alignment: Alignment.center,
).applyConstraint(
id: cId('sun'),
size: 200,
pinnedInfo: PinnedInfo(
parent,
Anchor(0.5, AnchorType.percent, 0.5, AnchorType.percent),
Anchor(0.3, AnchorType.percent, 0.5, AnchorType.percent),
angle: earthRevolutionAngle * 365 / 25.4,
),
),
Container(
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(1000)),
),
child: const Text('----'),
alignment: Alignment.center,
).applyConstraint(
id: cId('earth'),
size: 100,
pinnedInfo: PinnedInfo(
cId('sun'),
Anchor(0.5, AnchorType.percent, 0.5, AnchorType.percent),
Anchor(0.5, AnchorType.percent, 0.5, AnchorType.percent),
angle: earthRevolutionAngle * 365,
),
translate: circleTranslate(
radius: 250,
angle: earthRevolutionAngle,
),
translateConstraint: true,
),
Container(
decoration: const BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.all(Radius.circular(1000)),
),
child: const Text('----'),
alignment: Alignment.center,
).applyConstraint(
id: cId('moon'),
size: 50,
pinnedInfo: PinnedInfo(
cId('earth'),
Anchor(0.5, AnchorType.percent, 0.5, AnchorType.percent),
Anchor(0.5, AnchorType.percent, 0.5, AnchorType.percent),
angle: earthRevolutionAngle * 365 / 27.32,
),
translate: circleTranslate(
radius: 100,
angle: earthRevolutionAngle * 365 / 27.32,
),
translateConstraint: true,
),
Text('Sun rotates ${(earthRevolutionAngle * 365 / 25.4) ~/ 360} times')
.applyConstraint(
outTopCenterTo: cId('sun'),
),
Text('Earth rotates ${earthRevolutionAngle * 365 ~/ 360} times')
.applyConstraint(
outTopCenterTo: cId('earth'),
),
Text('Moon rotates ${(earthRevolutionAngle * 365 / 27.32) ~/ 360} times')
.applyConstraint(
outTopCenterTo: cId('moon'),
),
Container(
color: Colors.yellow,
).applyConstraint(
id: anchor,
size: 150,
centerTo: parent,
size: 250,
centerRightTo: parent.rightMargin(300),
),
Container(
color: Colors.red,
Expand Down
3 changes: 1 addition & 2 deletions example/pinned_position.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,14 @@ class PinnedPositionExample extends StatefulWidget {

class PinnedPositionExampleState extends State<PinnedPositionExample> {
late Timer timer;
int angle = 0;
double angle = 0;

@override
void initState() {
super.initState();
timer = Timer.periodic(const Duration(milliseconds: 16), (_) {
setState(() {
angle++;
angle %= 360;
});
});
}
Expand Down
Loading

0 comments on commit 14df02d

Please sign in to comment.