Skip to content

Commit 18bb4e8

Browse files
toly1994328toly1994328
committed
优化AnimatedContainer使用
1 parent 2e55828 commit 18bb4e8

1 file changed

Lines changed: 58 additions & 44 deletions

File tree

‎lib/views/widgets/StatefulWidget/AnimatedContainer/node1_base.dart‎

Lines changed: 58 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -29,69 +29,83 @@ class CustomAnimatedContainer extends StatefulWidget {
2929
}
3030

3131
class _CustomAnimatedContainerState extends State<CustomAnimatedContainer> {
32-
final Decoration startDecoration = BoxDecoration(
32+
final Decoration startDecoration = const BoxDecoration(
33+
color: Colors.deepPurple,
34+
borderRadius: BorderRadius.all(Radius.circular(30)),
35+
boxShadow: [
36+
BoxShadow(
37+
offset: Offset(1, 1),
38+
color: Colors.purple,
39+
blurRadius: 5,
40+
spreadRadius: 2)
41+
]);
42+
final Decoration endDecoration = const BoxDecoration(
3343
color: Colors.blue,
34-
image: DecorationImage(
35-
image: AssetImage('assets/images/wy_200x300.webp'), fit: BoxFit.cover),
36-
borderRadius: BorderRadius.all(Radius.circular(20)));
37-
final Decoration endDecoration = BoxDecoration(
38-
image: DecorationImage(
39-
image: AssetImage('assets/images/wy_200x300.webp'), fit: BoxFit.cover),
40-
color: Colors.orange,
41-
borderRadius: BorderRadius.all(Radius.circular(50)));
44+
borderRadius: BorderRadius.all(Radius.circular(10)),
45+
boxShadow: [
46+
BoxShadow(
47+
offset: Offset(1, 1),
48+
color: Colors.blue,
49+
blurRadius: 10,
50+
spreadRadius: 0)
51+
]);
4252

43-
final Alignment startAlignment = Alignment(0, 0);
44-
final Alignment endAlignment = Alignment.topLeft + Alignment(0.2, 0.2);
53+
final Alignment startAlignment = Alignment.topLeft + Alignment(0.2, 0.2);
54+
final Alignment endAlignment = Alignment.center;
4555

46-
final startHeight = 100.0;
47-
final endHeight = 50.0;
56+
final double startHeight = 150.0;
57+
final double endHeight = 100.0;
4858

4959
Decoration _decoration;
5060
double _height;
5161
Alignment _alignment;
5262

5363
@override
5464
void initState() {
65+
super.initState();
5566
_decoration = startDecoration;
5667
_height = startHeight;
57-
_alignment=startAlignment;
58-
super.initState();
68+
_alignment = startAlignment;
5969
}
6070

71+
bool get selected => _height == endHeight;
6172
@override
6273
Widget build(BuildContext context) {
63-
return Column(
74+
return Wrap(
75+
direction: Axis.vertical,
76+
crossAxisAlignment: WrapCrossAlignment.center,
6477
children: <Widget>[
65-
_buildSwitch(),
66-
AnimatedContainer(
67-
duration: Duration(seconds: 1),
68-
curve: Curves.fastOutSlowIn,
69-
alignment: _alignment,
70-
color: Colors.grey.withAlpha(22),
71-
width: 200,
72-
height: 120,
73-
child: UnconstrainedBox(
74-
child: AnimatedContainer(
75-
duration: Duration(seconds: 1),
76-
curve: Curves.fastOutSlowIn,
77-
decoration: _decoration,
78-
onEnd: () => print('End'),
79-
height: _height,
80-
width: _height,
81-
),
82-
),
78+
Switch(
79+
value: selected,
80+
onChanged: onChanged,
8381
),
82+
buildAnim()
8483
],
8584
);
8685
}
87-
88-
Widget _buildSwitch() => Switch(
89-
value: _height == endHeight,
90-
onChanged: (v) {
91-
setState(() {
92-
_height = v ? endHeight : startHeight;
93-
_decoration = v ? endDecoration : startDecoration;
94-
_alignment = v ? endAlignment : startAlignment;
95-
});
96-
});
86+
Widget _buildChild() => const Icon(
87+
Icons.camera_outlined,
88+
size: 30,
89+
color: Colors.white,
90+
);
91+
Widget buildAnim() => AnimatedContainer(
92+
duration: const Duration(seconds: 1),
93+
curve: Curves.fastOutSlowIn,
94+
decoration: _decoration,
95+
alignment: _alignment,
96+
onEnd: onEnd,
97+
height: _height,
98+
width: _height,
99+
child: _buildChild(),
100+
);
101+
void onChanged(bool value) {
102+
setState(() {
103+
_height = value ? endHeight : startHeight;
104+
_decoration = value ? endDecoration : startDecoration;
105+
_alignment = value ? endAlignment : startAlignment;
106+
});
107+
}
108+
void onEnd() {
109+
print('End');
110+
}
97111
}

0 commit comments

Comments
 (0)