Skip to content

Commit 14235aa

Browse files
author
fbchen
committed
update example
1 parent 166afee commit 14235aa

File tree

3 files changed

+220
-0
lines changed

3 files changed

+220
-0
lines changed

‎README.md

+110
Original file line numberDiff line numberDiff line change
@@ -922,6 +922,116 @@ class MarginExample extends StatelessWidget {
922922
}
923923
```
924924

925+
8. pinned position [Flutter Web Online Example](https://constraintlayout.flutterfirst.cn)
926+
927+
![pinned_position.gif](https://github.com/hackware1993/flutter-constraintlayout/blob/master/pinned_position.gif?raw=true)
928+
929+
```dart
930+
class PinnedPositionExampleState extends State<PinnedPositionExample> {
931+
late Timer timer;
932+
int angle = 0;
933+
934+
@override
935+
void initState() {
936+
super.initState();
937+
timer = Timer.periodic(const Duration(milliseconds: 16), (_) {
938+
setState(() {
939+
angle++;
940+
angle %= 360;
941+
});
942+
});
943+
}
944+
945+
@override
946+
void dispose() {
947+
super.dispose();
948+
timer.cancel();
949+
}
950+
951+
@override
952+
Widget build(BuildContext context) {
953+
ConstraintId anchor = ConstraintId('anchor');
954+
return Scaffold(
955+
appBar: const CustomAppBar(
956+
title: 'Pinned Position',
957+
codePath: 'example/pinned_position.dart',
958+
),
959+
body: ConstraintLayout(
960+
children: [
961+
Container(
962+
color: Colors.yellow,
963+
).applyConstraint(
964+
id: anchor,
965+
size: 200,
966+
centerTo: parent,
967+
),
968+
Container(
969+
color: Colors.cyan,
970+
).applyConstraint(
971+
size: 100,
972+
pinnedInfo: PinnedInfo(
973+
anchor,
974+
PinnedPos(0.2, PinnedType.percent, 0.2, PinnedType.percent),
975+
PinnedPos(1, PinnedType.percent, 1, PinnedType.percent),
976+
rotateDegree: angle,
977+
),
978+
),
979+
Container(
980+
color: Colors.orange,
981+
).applyConstraint(
982+
size: 60,
983+
pinnedInfo: PinnedInfo(
984+
anchor,
985+
PinnedPos(1, PinnedType.percent, 1, PinnedType.percent),
986+
PinnedPos(0, PinnedType.percent, 0, PinnedType.percent),
987+
rotateDegree: 360 - angle,
988+
),
989+
),
990+
Container(
991+
color: Colors.black,
992+
).applyConstraint(
993+
size: 60,
994+
pinnedInfo: PinnedInfo(
995+
anchor,
996+
PinnedPos(0.5, PinnedType.percent, 0.5, PinnedType.percent),
997+
PinnedPos(0.5, PinnedType.percent, 0.5, PinnedType.percent),
998+
rotateDegree: angle,
999+
),
1000+
),
1001+
Container(
1002+
decoration: const BoxDecoration(
1003+
color: Colors.red,
1004+
borderRadius: BorderRadius.all(Radius.circular(10)),
1005+
),
1006+
).applyConstraint(
1007+
size: 10,
1008+
centerBottomRightTo: anchor,
1009+
),
1010+
Container(
1011+
decoration: const BoxDecoration(
1012+
color: Colors.red,
1013+
borderRadius: BorderRadius.all(Radius.circular(10)),
1014+
),
1015+
).applyConstraint(
1016+
size: 10,
1017+
centerTopLeftTo: anchor,
1018+
),
1019+
Container(
1020+
decoration: const BoxDecoration(
1021+
color: Colors.red,
1022+
borderRadius: BorderRadius.all(Radius.circular(10)),
1023+
),
1024+
).applyConstraint(
1025+
size: 10,
1026+
centerTo: anchor,
1027+
),
1028+
],
1029+
),
1030+
);
1031+
}
1032+
}
1033+
```
1034+
9251035
# Performance optimization
9261036

9271037
1. When the layout is complex, if the child elements need to be repainted frequently, it is

‎README_CN.md

+110
Original file line numberDiff line numberDiff line change
@@ -896,6 +896,116 @@ class MarginExample extends StatelessWidget {
896896
}
897897
```
898898

899+
8. 图钉定位 [Flutter Web 在线示例](https://constraintlayout.flutterfirst.cn)
900+
901+
![pinned_position.gif](https://github.com/hackware1993/flutter-constraintlayout/blob/master/pinned_position.gif?raw=true)
902+
903+
```dart
904+
class PinnedPositionExampleState extends State<PinnedPositionExample> {
905+
late Timer timer;
906+
int angle = 0;
907+
908+
@override
909+
void initState() {
910+
super.initState();
911+
timer = Timer.periodic(const Duration(milliseconds: 16), (_) {
912+
setState(() {
913+
angle++;
914+
angle %= 360;
915+
});
916+
});
917+
}
918+
919+
@override
920+
void dispose() {
921+
super.dispose();
922+
timer.cancel();
923+
}
924+
925+
@override
926+
Widget build(BuildContext context) {
927+
ConstraintId anchor = ConstraintId('anchor');
928+
return Scaffold(
929+
appBar: const CustomAppBar(
930+
title: 'Pinned Position',
931+
codePath: 'example/pinned_position.dart',
932+
),
933+
body: ConstraintLayout(
934+
children: [
935+
Container(
936+
color: Colors.yellow,
937+
).applyConstraint(
938+
id: anchor,
939+
size: 200,
940+
centerTo: parent,
941+
),
942+
Container(
943+
color: Colors.cyan,
944+
).applyConstraint(
945+
size: 100,
946+
pinnedInfo: PinnedInfo(
947+
anchor,
948+
PinnedPos(0.2, PinnedType.percent, 0.2, PinnedType.percent),
949+
PinnedPos(1, PinnedType.percent, 1, PinnedType.percent),
950+
rotateDegree: angle,
951+
),
952+
),
953+
Container(
954+
color: Colors.orange,
955+
).applyConstraint(
956+
size: 60,
957+
pinnedInfo: PinnedInfo(
958+
anchor,
959+
PinnedPos(1, PinnedType.percent, 1, PinnedType.percent),
960+
PinnedPos(0, PinnedType.percent, 0, PinnedType.percent),
961+
rotateDegree: 360 - angle,
962+
),
963+
),
964+
Container(
965+
color: Colors.black,
966+
).applyConstraint(
967+
size: 60,
968+
pinnedInfo: PinnedInfo(
969+
anchor,
970+
PinnedPos(0.5, PinnedType.percent, 0.5, PinnedType.percent),
971+
PinnedPos(0.5, PinnedType.percent, 0.5, PinnedType.percent),
972+
rotateDegree: angle,
973+
),
974+
),
975+
Container(
976+
decoration: const BoxDecoration(
977+
color: Colors.red,
978+
borderRadius: BorderRadius.all(Radius.circular(10)),
979+
),
980+
).applyConstraint(
981+
size: 10,
982+
centerBottomRightTo: anchor,
983+
),
984+
Container(
985+
decoration: const BoxDecoration(
986+
color: Colors.red,
987+
borderRadius: BorderRadius.all(Radius.circular(10)),
988+
),
989+
).applyConstraint(
990+
size: 10,
991+
centerTopLeftTo: anchor,
992+
),
993+
Container(
994+
decoration: const BoxDecoration(
995+
color: Colors.red,
996+
borderRadius: BorderRadius.all(Radius.circular(10)),
997+
),
998+
).applyConstraint(
999+
size: 10,
1000+
centerTo: anchor,
1001+
),
1002+
],
1003+
),
1004+
);
1005+
}
1006+
}
1007+
```
1008+
8991009
# 性能优化
9001010

9011011
1. 当布局复杂时，如果子元素需要频繁重绘，可以考虑使用 RepaintBoundary。当然合成 Layer 也有开销，所以需要合理使用。

‎pinned_position.gif

91.7 KB
Loading

0 commit comments

Comments
 (0)