>

4 페이지의 페이지 뷰를 가지고 있습니다 :

PageView(
          children: [
              _buildPage(color: Colors.orange[600]),
              _buildPage(color: Colors.deepPurple[400]),
              _buildPage(color: Colors.yellow[300]),
              _buildPage(color: Colors.blue[400]),
            ],
          ),

각 페이지에는 매개 변수로 전달한 색상의 컨테이너가 있습니다 :

Widget _buildPage({color: Color}) {
    return Container(
      color: color,
      ...

페이지를 스 와이프 할 때마다

페이지를 스 와이프 할 때마다 한 페이지의 색상이 새 페이지의 색상으로 그라데이션으로 희미 해 지도록하고 싶습니다. 그렇게 할 수 있습니까? 나는 Flutter를 처음 접했고 이것에 대해 아무것도 찾을 수 없었습니다.

수정: 이것이 내가 원하는 모습입니다.

빨리 건너 뛰기
그리고 천천히

다운로드 한 gif가 너무 느리게 재생되므로 gfycat 링크를 추가하고 있습니다.


  • 답변 # 1

    TweenSequence 를 사용할 수 있습니다  여러 트윈간에 전환합니다. ColorTween 와 결합  색상 전환을 정의합니다.

    그러면 AnimatedBuilder 를 사용하여 모든 것을 감쌀 수 있습니다.  당신의 PageController 를 듣고 .

    class Home extends StatefulWidget {
      @override
      HomeState createState() {
        return new HomeState();
      }
    }
    class HomeState extends State<Home> {
      PageController pageController;
      Animatable<Color> background;
      @override
      void initState() {
        _initialize();
        super.initState();
      }
      void _initialize() {
        background = TweenSequence<Color>([
          TweenSequenceItem(
            weight: 1.0,
            tween: ColorTween(
              begin: Colors.orange[600],
              end: Colors.deepPurple[400],
            ),
          ),
          TweenSequenceItem(
            weight: 1.0,
            tween: ColorTween(
              begin: Colors.deepPurple[400],
              end: Colors.yellow[300],
            ),
          ),
          TweenSequenceItem(
            weight: 1.0,
            tween: ColorTween(
              begin: Colors.yellow[300],
              end: Colors.blue[400],
            ),
          ),
        ]);
        pageController = PageController();
      }
      @override
      void reassemble() {
        pageController.dispose();
        _initialize();
        super.reassemble();
      }
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: AnimatedBuilder(
            animation: pageController,
            builder: (context, child) {
              final color = pageController.hasClients ? pageController.page / 3 : .0;
              return DecoratedBox(
                decoration: BoxDecoration(
                  color: background.evaluate(AlwaysStoppedAnimation(color)),
                ),
                child: child,
              );
            },
            child: PageView(
              controller: pageController,
              children: [
                Center(child: Text("Orange")),
                Center(child: Text("Purple")),
                Center(child: Text("Lime")),
                Center(child: Text("Blue")),
              ],
            ),
          ),
        );
      }
    }
    
    

관련 자료

  • 이전 java - 최대 절전 모드 - save () 메소드를 사용한 차이 업데이트 vs update () 메소드를 사용한 업데이트
  • 다음 python 2.7 - nao 로봇의 almemory 데이터에 대한 반복 액세스 - 데이터를 찾을 수 없습니다