flutter 在主题中更改页面过渡速度/持续时间抖动

nnt7mjpx 于 2022-11-25 发布在 Flutter

关注(0)|答案(4)|浏览(128)

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

我可以使用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,
    );
  }
}

flutter

来源：https://stackoverflow.com/questions/58379123/flutter-change-page-transition-speed-duration-in-the-theme

4条答案

按热度按时间

mf98qq941#

我可以使用命名路径来实现这一点，您需要在您自己的Navigator示例中列出这些路径，该示例提供给MaterialApp构建器。必须删除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);
}

赞(0）回复(0）举报 2022-11-25

ffvjumwh2#

创建此类：

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()));

赞(0）回复(0）举报 2022-11-25

k3fezbri3#

最好尝试更新MaterialPageRoute（page.dart）文件中flutter.的默认过渡速度。
持续时间获取transitionDuration =〉常量持续时间（毫秒：300）;
更新此行，正常情况下，在扑动中设置为300毫秒。

赞(0）回复(0）举报 2022-11-25

6vl6ewon4#

当在材料应用程序中的onGenerate route中添加路线时，它在移动设备上工作正常，但在Flutter Web上不允许深度链接URL导航（如google.com/products），因此最好在Flutter Web的MaterialPageRoute（page.dart）文件中更改速度

赞(0）回复(0）举报 2022-11-25

我来回答

flutter 在主题中更改页面过渡速度/持续时间抖动

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

4条答案

相关问题

热门标签

最新问答