在Flutter中,Animated Switcher可以通过使用不同的Widget,实现平滑的切换动画。我们可以使用SharedAxisTransition,进一步增强其动画效果。共享轴动画意味着切换的两个页面将共享某些轴向上的状态。
要使用共享轴动画,需要在pubspec.yaml文件中添加flutter_widget_from_html和animations库。下面是一个使用共享轴动画的示例代码:
import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:animations/animations.dart';
class SharedAxisDemo extends StatefulWidget {
const SharedAxisDemo({Key? key}) : super(key: key);
@override
_SharedAxisDemoState createState() => _SharedAxisDemoState();
}
class _SharedAxisDemoState extends State {
int _counter = 0;
bool _isFirstPage = true;
void _incrementCounter() {
setState(() {
_counter++;
});
}
Widget _buildFirstPage() {
return HtmlWidget(
'$_counter
'
'',
webView: true,
onTapUrl: (url) {
debugPrint(url);
},
);
}
Widget _buildSecondPage() {
return Text('$_counter');
}
@override
Widget build(BuildContext context) {
final startPage = _isFirstPage ? _buildFirstPage() : _buildSecondPage();
return Scaffold(
appBar: AppBar(
title: Text('Shared Axis Demo'),
),
body: SafeArea(
child: SharedAxisTransition(
animation: _isFirstPage ? SharedAxisTransitionType.scaled : SharedAxisTransitionType.horizontal,
child: startPage,
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
这个示例使用了一个HTML Widget和一个文本Widget,每次点击按钮时,计数器+1,用