在 BLoC 模式上更改 Widget 时如何添加动画过渡?
How to add animated transitions when changing Widget on BLoC pattern?
所以我一直在关注 bloc login tutorial,虽然我设法完成了它,但我对 Flutter & Dart 还是很陌生。
有一部分代码,根据状态,代码 returns 是不同的小部件,而不是新的脚手架。由于它不使用路由,因此页面之间的转换看起来断断续续和笨拙。
return BlocProvider<AuthenticationBloc>(
bloc: authenticationBloc,
child: MaterialApp(
debugShowCheckedModeBanner: false,
home: BlocBuilder<AuthenticationEvent, AuthenticationState>(
bloc: authenticationBloc,
builder: (BuildContext context, AuthenticationState state) {
if (state is AuthenticationUninitialized) {
return SplashPage();
}
if (state is AuthenticationAuthenticated) {
return HomePage();
}
if (state is AuthenticationUnauthenticated) {
return LoginPage(userRepository: userRepository);
}
if (state is AuthenticationLoading) {
return LoadingIndicator();
}
},
),
),
);
我试过添加一个 Navigation.push 包裹 returns,像这样:
if (state is AuthenticationUninitialized) {
Navigation.push(
return SplashPage();
),
}
虽然在语法上没有错误,但会导致应用程序崩溃。有谁知道在维护 BLoC 示例的同时实现这一点的方法?谢谢
您可以将页面换行 AnimatedSwitcher:
return BlocProvider<AuthenticationBloc>(
bloc: authenticationBloc,
child: MaterialApp(
home: BlocBuilder<AuthenticationEvent, AuthenticationState>(
bloc: authenticationBloc,
builder: (BuildContext context, AuthState state) {
return AnimatedSwitcher(
duration: Duration(milliseconds: 250),
child: _buildPage(context, state),
);
},
),
),
);
默认情况下,它使用淡入淡出过渡并以相反的顺序为新旧小部件设置动画。
要在动画期间保持旧的小部件就位,请传递给 AnimatedSwitcher
switchOutCurve: Threshold(0),
要模仿 Android 中的 Navigator.push
转换,传递它
transitionBuilder: (Widget child, Animation<double> animation) {
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(0, 0.25),
end: Offset.zero,
).animate(animation),
child: child,
);
},
要使用系统转换,请尝试类似
transitionBuilder: (Widget child, Animation<double> animation) {
final theme = Theme.of(context).pageTransitionsTheme;
final prev = MaterialPageRoute(builder: (_) => widget);
return theme.buildTransitions(prev, context, animation, null, child);
},
(最后一个没测试好)
所以我一直在关注 bloc login tutorial,虽然我设法完成了它,但我对 Flutter & Dart 还是很陌生。
有一部分代码,根据状态,代码 returns 是不同的小部件,而不是新的脚手架。由于它不使用路由,因此页面之间的转换看起来断断续续和笨拙。
return BlocProvider<AuthenticationBloc>(
bloc: authenticationBloc,
child: MaterialApp(
debugShowCheckedModeBanner: false,
home: BlocBuilder<AuthenticationEvent, AuthenticationState>(
bloc: authenticationBloc,
builder: (BuildContext context, AuthenticationState state) {
if (state is AuthenticationUninitialized) {
return SplashPage();
}
if (state is AuthenticationAuthenticated) {
return HomePage();
}
if (state is AuthenticationUnauthenticated) {
return LoginPage(userRepository: userRepository);
}
if (state is AuthenticationLoading) {
return LoadingIndicator();
}
},
),
),
);
我试过添加一个 Navigation.push 包裹 returns,像这样:
if (state is AuthenticationUninitialized) {
Navigation.push(
return SplashPage();
),
}
虽然在语法上没有错误,但会导致应用程序崩溃。有谁知道在维护 BLoC 示例的同时实现这一点的方法?谢谢
您可以将页面换行 AnimatedSwitcher:
return BlocProvider<AuthenticationBloc>(
bloc: authenticationBloc,
child: MaterialApp(
home: BlocBuilder<AuthenticationEvent, AuthenticationState>(
bloc: authenticationBloc,
builder: (BuildContext context, AuthState state) {
return AnimatedSwitcher(
duration: Duration(milliseconds: 250),
child: _buildPage(context, state),
);
},
),
),
);
默认情况下,它使用淡入淡出过渡并以相反的顺序为新旧小部件设置动画。
要在动画期间保持旧的小部件就位,请传递给 AnimatedSwitcher
switchOutCurve: Threshold(0),
要模仿 Android 中的 Navigator.push
转换,传递它
transitionBuilder: (Widget child, Animation<double> animation) {
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(0, 0.25),
end: Offset.zero,
).animate(animation),
child: child,
);
},
要使用系统转换,请尝试类似
transitionBuilder: (Widget child, Animation<double> animation) {
final theme = Theme.of(context).pageTransitionsTheme;
final prev = MaterialPageRoute(builder: (_) => widget);
return theme.buildTransitions(prev, context, animation, null, child);
},
(最后一个没测试好)