Flutter Pageview 滑动更改带有动画的背景图像

Question

我在一个项目中工作，其中有一个 Stack 小部件和一个带有图像的容器（这是应用程序的背景）：

//Background image:
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage(background),
                fit: BoxFit.fill,
              ),
            ),
          ),

和一个包含应用程序页面的 PageView 小部件。当小部件更改页面，然后 AssetImage(background) 使用褪色动画更改图像时，我该怎么做？目前在 PageViews 小部件 onPageChanged 部分中，我可以使用多个 setStates 更改背景：

onPageChanged: (index) {
              if (index == 0) {
                setState(() {
                  pageName = "Home";
                  background =
                      "lib/assets/Backgrounds/gradient_background_6.jpg";
                });
              } else if (index == 1) {
                setState(() {
                  pageName = "Coupons";
                  background =
                      "lib/assets/Backgrounds/gradient_background_5.jpg";
                });
              } else if (index == 2) {
                setState(() {
                  pageName = "Forum";
                  background =
                      "lib/assets/Backgrounds/gradient_background_4.jpg";
                });
              }
            },

但使用此解决方案时，背景图像只是发生变化而没有任何动画。用褪色或任何其他动画更改图像的最佳原因是什么？

Answer 1

也许你可以使用 SwitchAnimation，但你需要一个键你可以像“键”一样使用索引这是一个例子

import 'package:flutter/material.dart';


class Examp extends StatelessWidget {
  const Examp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: 
       AnimatedSwitcher(
        key: index,
        duration: const Duration(milliseconds: 700),
        child: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage(background),
                fit: BoxFit.fill,
              ),
            ),
          ),
        
        ),
    );
  }
}

判断此代码是否适合您

Answer 2

使用 AnimatedOpacity 对背景图像进行淡入淡出效果，您还可以使用我已经在其中使用的 duration 属性进行快速或慢速淡入淡出控制

输出：-

代码:-

import 'package:flutter/material.dart';

class PageViewExample extends StatefulWidget {
  const PageViewExample({Key? key}) : super(key: key);

  @override
  State<PageViewExample> createState() => _PageViewExampleState();
}

class _PageViewExampleState extends State<PageViewExample>
    with SingleTickerProviderStateMixin {
  int currentIndex = 0;
  String background = "https://picsum.photos/id/237/200/300";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView.builder(
        onPageChanged: (index) => setState(() {
          currentIndex = index;
          currentIndex == 1
              ? background = "https://picsum.photos/id/238/200/300"
              : currentIndex == 2
                  ? background = "https://picsum.photos/id/239/200/300"
                  : background = "https://picsum.photos/id/237/200/300";
        }),
        physics: const ClampingScrollPhysics(),
        itemCount: 3,
        itemBuilder: (context, index) {
          return AnimatedOpacity(
            duration: const Duration(seconds: 2),
            opacity: currentIndex == index ? 1.0 : 0.1,
            child: Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(background),
                  fit: BoxFit.fill,
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

Flutter Pageview 滑动更改带有动画的背景图像

Flutter Pageview swipe change background image with animation

animation

image

flutter

flutter-pageview