1、在main.dart的MaterialApp内,将home对应的组件内容设置成,启动页所在组件
2、启动页设置有状态组件,第二个状态类还要with多继承SingleTickerProviderStateMixin
3、在initState生命周期函数中定义动画控制器和监听动画结束跳转到指定页面
AnimationController xx=AnimationController(vsync: this,duration: Duration(milliseconds:动画毫秒数 ));
_animation.addStatusListener((status){
if(status==AnimationStatus.completed) 动画结束状态
{
跳转时销毁页面,避免动画占据内存
Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context)=>组件名()),(route) => route == null);
}
});
4、在dispose生命周期函数中销毁控制器,避免内存泄露
xx.dispose();
5、设置动画
直接在build中
其他种类动画和混合动画,查看普通路由的切换动画文章
return FadeTransition(
opacity: Tween(begin: 0.0,end:1.0).animate(xx控制器),
child: 启动页内容,
);
代码示例:
main.dart
import 'package:flutter/gestures.dart';
import "package:flutter/material.dart";
import 'package:flutter/rendering.dart';
import "drag.dart";
import 'dart:ui';
import 'page/1.dart';
import 'page/2.dart';
import 'page/3.dart';
import 'xuan.dart';
void main()
{
runApp(App());
}
class App extends StatelessWidget {
const App({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return App2();
}
}
class App2 extends StatefulWidget {
App2({Key key}) : super(key: key);
@override
_AppState createState() => _AppState();
}
class _AppState extends State<App2> with SingleTickerProviderStateMixin {
// List _page=[Home3(),Home2(),Home4()];
// int index=0;
TabController con;
@override
void initState() {
// TODO: implement initState
super.initState();
con=new TabController(length: 3, vsync: this);
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
con.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Home3() ,
//去掉右上角的debug贴纸
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue
),
);
}
}
启动页:
import 'package:flutter/material.dart';
import "3.dart";
class Home3 extends StatefulWidget {
Home3({Key key}) : super(key: key);
@override
_Home3State createState() => _Home3State();
}
class _Home3State extends State<Home3> with SingleTickerProviderStateMixin{
AnimationController _con;
Animation _animation;
@override
void initState() {
super.initState();
_con=AnimationController(vsync: this,duration: Duration(milliseconds:3000 ));
_animation= Tween(begin: 0.0,end:1.0).animate(_con);
_animation.addStatusListener((status){
if(status==AnimationStatus.completed)
{
Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context)=>Home4()),(route) => route == null);
}
});
_con.forward(); //播放动画
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
_con.dispose();
}
@override
Widget build(BuildContext context) {
return FadeTransition(
opacity: _animation,
child: Image.asset("images/2.0x/钢铁侠4.jpg",scale: 2.0,fit: BoxFit.cover,),
);
}
}
跳转页:
import 'dart:async';
import 'dart:convert' as convert;
import 'package:http/http.dart' as http;
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:date_format/date_format.dart';
import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:myflutter/page/me.dart';
class Home4 extends StatefulWidget {
Home4({Key key}) : super(key: key);
@override
_Home2State createState() => _Home2State();
}
class _Home2State extends State<Home4> {
String news='哈哈';
@override
void initState() {
super.initState();
}
var url="http://api.tianapi.com/txapi/ncov/index?key=4a8edfc8ac5eae9b0c5bf08157abba96";
get() async{
Response response = await Dio().get(url);
print(response);
}
var url2="http://api.tianapi.com/txapi/ncov/index";
post() async
{
Response response = await Dio().post(url2, data:{'key':'4a8edfc8ac5eae9b0c5bf08157abba96'});
print(response);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body:Container(
width: double.infinity,
color: Colors.blue,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
RaisedButton(
child: Text(news),
color: Theme.of(context).accentColor,
onPressed: (){
get();
},
),
RaisedButton(
child: Text('post'),
color: Theme.of(context).accentColor,
onPressed: (){
post();
},
),
]),
)
);
}
}
// 因为表单组件需要改变状态,所以要使用有状态组件
/*
轮播图必须外包一层有高度的父容器或者使用子元素宽高比组件AspectRatio
json.encode(Map); 将Map类型转换成json字符串
json.decode(json); 将json字符串类型转换成Map
*/