flutter - 在页面视图之间颤动淡入淡出动画

Question

我试图找到如何在 PageView 页面之间淡入淡出。

这是我的页面视图：

PageView(
                  controller: controller,
                  children: [
                    Container(
                      decoration: BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage("assets/image4.jpg"),
                            fit: BoxFit.cover),
                      ),
                      child: Center(
                          child: Text(
                        'myText',
                        style: TextStyle(color: Colors.white, fontSize: 40.0),
                      )),
                    ),
                    Container(
                      decoration: BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage("assets/image2.jpg"),
                            fit: BoxFit.cover),
                      ),
                      child: Center(
                          child: Text(
                            'myText',
                            style: TextStyle(color: Colors.white, fontSize: 40.0),
                          )),
                    ),
                    Container(
                      decoration: BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage("assets/image3.jpg"),
                            fit: BoxFit.cover),
                      ),
                      child: Center(
                          child: Text(
                            'myText',
                            style: TextStyle(color: Colors.white, fontSize: 40.0),
                          )),
                    ),
                  ],
                ),

是否可以实现淡入淡出过渡？我搜索了堆栈溢出，但我唯一能找到的是这个包： https ://pub.dev/packages/transformer_page_view#-readme-tab-

问题是它没有控制器，所以我的 smoothPageIndactor 不起作用。（https://pub.dev/packages/smooth_page_indicator）

谢谢！

标签： flutterdart

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用TransformerPageView.children和TransformerPageController

TransformerPageController controller = TransformerPageController();
...
Expanded(
          flex: 5,
          child: TransformerPageView.children(
            pageController: controller,
            transformer: ScaleAndFadeTransformer(),

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
import 'package:transformer_page_view/transformer_page_view.dart';

class ScaleAndFadeTransformer extends PageTransformer {
  final double _scale;
  final double _fade;

  ScaleAndFadeTransformer({double fade: 0.3, double scale: 0.8})
      : _fade = fade,
        _scale = scale;

  @override
  Widget transform(Widget item, TransformInfo info) {
    double position = info.position;
    double scaleFactor = (1 - position.abs()) * (1 - _scale);
    double fadeFactor = (1 - position.abs()) * (1 - _fade);
    double opacity = _fade + fadeFactor;
    double scale = _scale + scaleFactor;
    return new Opacity(
      opacity: opacity,
      child: new Transform.scale(
        scale: scale,
        child: item,
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TransformerPageController controller = TransformerPageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              flex: 5,
              child: TransformerPageView.children(
                pageController: controller,
                transformer: ScaleAndFadeTransformer(),
                children: [
                  Container(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                          image:
                              NetworkImage('https://picsum.photos/250?image=9'),
                          fit: BoxFit.cover),
                    ),
                    child: Center(
                        child: Text(
                      'myText',
                      style: TextStyle(color: Colors.white, fontSize: 40.0),
                    )),
                  ),
                  Container(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                          image: NetworkImage(
                              'https://picsum.photos/250?image=10'),
                          fit: BoxFit.cover),
                    ),
                    child: Center(
                        child: Text(
                      'myText',
                      style: TextStyle(color: Colors.white, fontSize: 40.0),
                    )),
                  ),
                  Container(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                          image: NetworkImage(
                              'https://picsum.photos/250?image=11'),
                          fit: BoxFit.cover),
                    ),
                    child: Center(
                        child: Text(
                      'myText',
                      style: TextStyle(color: Colors.white, fontSize: 40.0),
                    )),
                  ),
                ],
              ),
            ),
            Expanded(
              flex: 1,
              child: SmoothPageIndicator(
                controller: controller, // PageController
                count: 3,
                effect: WormEffect(), // your preferred effect
              ),
            )
          ],
        ),
      ),
    );
  }
}