Flutter 在主题中改变页面过渡速度/持续时间

Posted 2023-02-23

【中文标题】Flutter 在主题中改变页面过渡速度/持续时间

【英文标题】：Flutter change page transition speed/duration in the theme

【发布时间】：2020-02-11 05:12:15

【问题描述】：

如何更改应用主题中设置的过渡持续时间/速度？

我可以使用MaterialApp 的主题更改过渡动画。下面的示例将默认转换替换为FadeTransition。使用淡入淡出过渡时感觉很慢，我无法弄清楚如何更改主题中设置的过渡持续时间。

import 'package:flutter/material.dart';

void main() 
  runApp(MyApp());


final themeData = ThemeData(
  pageTransitionsTheme: PageTransitionsTheme(builders: 
    TargetPlatform.ios: FadeTransitionBuilder(),
    TargetPlatform.android: FadeTransitionBuilder(),
  ),
);

class FadeTransitionBuilder extends PageTransitionsBuilder 
  @override
  Widget buildTransitions<T>(_, __, animation, ___, child) => FadeTransition(opacity: animation, child: child);


class MyApp extends StatefulWidget 
  @override
  _MyAppState createState() => _MyAppState();


class _MyAppState extends State<MyApp> with WidgetsBindingObserver 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Mobile',
      theme: themeData,
      initialRoute: '/',
      routes: routes,
    );
  

【问题讨论】：

在颤振源代码中这看起来是硬编码为 300 毫秒？？？：github.com/flutter/flutter/blob/dev/packages/flutter/lib/src/…

【参考方案1】：

我可以使用命名路由来实现这一点，您需要在提供给 MaterialApp 构建器的您自己的 Navigator 实例中列出这些路由。 MaterialApp 的 initialRoute 属性必须被移除。

class _MyAppState extends State<MyApp> with WidgetsBindingObserver 

  Route<dynamic> generateRoute(RouteSettings settings) 
    switch (settings.name) 
      case '/about':
        return CustomPageRoute(
            builder: (context) => About());
      default:
        return CustomPageRoute(
            builder: (context) => Home());
    
  

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Mobile',
      theme: themeData,
      builder: (context, widget) 
        return Navigator(
          onGenerateRoute: generateRoute,
        );
      ,
    );
  


class CustomPageRoute extends MaterialPageRoute 
  @override
  Duration get transitionDuration => const Duration(milliseconds: 1000);

  CustomPageRoute(builder) : super(builder: builder);

【参考方案2】：

创建这个类：

class MyRoute extends MaterialPageRoute 
  MyRoute(WidgetBuilder builder) : super(builder: builder);

  @override
  Duration get transitionDuration => Duration(seconds: 3);

现在，而不是使用常规

Navigator.push(context, MaterialPageRoute(builder: (_) => Page2()));

使用

Navigator.push(context, MyRoute(builder: (_) => Page2()));

【讨论】：

非常相似的解决方案（扩展 MaterialPageRoute 类），但更简洁，代码更少。对我来说效果很好 - 谢谢！