要让额外的widgets和MarkDown一起在Scaffold body中颤动,可以使用Flutter中的动画效果来实现。以下是一个示例代码,展示了如何使用Flutter的动画库来实现这个效果:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Shaking Widgets'),
),
body: ShakeAnimation(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Hello, World!',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20),
Text(
'This is a Markdown text.',
style: TextStyle(fontSize: 18),
),
],
),
),
),
);
}
}
class ShakeAnimation extends StatefulWidget {
final Widget child;
ShakeAnimation({required this.child});
@override
_ShakeAnimationState createState() => _ShakeAnimationState();
}
class _ShakeAnimationState extends State<ShakeAnimation>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: Duration(milliseconds: 500),
vsync: this,
);
_animation = Tween<double>(begin: -10, end: 10).animate(
CurvedAnimation(
parent: _controller,
curve: Curves.easeInOut,
),
)..addStatusListener((status) {
if (status == AnimationStatus.completed) {
_controller.reverse();
} else if (status == AnimationStatus.dismissed) {
_controller.forward();
}
});
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _animation,
child: widget.child,
builder: (BuildContext context, Widget? child) {
return Transform.translate(
offset: Offset(_animation.value, 0),
child: child,
);
},
);
}
}
在上述代码中,我们创建了一个ShakeAnimation
小部件,它接受一个child
小部件作为参数。ShakeAnimation
小部件使用AnimationController
和Animation
来创建一个水平方向的抖动动画效果。在build
方法中,我们使用AnimatedBuilder
来构建动画,并通过Transform.translate
将抖动效果应用于child
小部件。
你可以将需要颤动的widgets和Markdown文本放置在ShakeAnimation
小部件中,然后将ShakeAnimation
小部件放置在Scaffold的body中,即可实现额外的widgets和Markdown一起在Scaffold body中颤动的效果。
请注意,这只是一个示例代码,你可以根据实际需求进行修改和扩展。
云+社区技术沙龙[第14期]
Techo Youth2022学年高校公开课
serverless days
云+社区开发者大会 长沙站
云+社区技术沙龙[第9期]
云+社区技术沙龙[第3期]
云+社区沙龙online第5期[架构演进]
领取专属 10元无门槛券
手把手带您无忧上云