flutter - 设置脚手架背景色

Question

就像我要通过动画Scaffold background-color更改的标题一样。在onPageChanged PageView上，我触发了动画。到现在为止还挺好。问题在于更多的颜色。我的意思是，我必须从API中获取颜色，并且当用户滚动卡(PageView)时，我必须调整该卡的颜色。
有什么建议么？

这是2种颜色的当前代码(带有预览):DartPad。

提前致谢 :)

Answer 1

使用 TweenSequence<Color>

假设序列中每种颜色的权重相同，则可以使用index / colors.length找到给定的颜色，如我在onPageChanged回调中所示。

鉴于此，_controller.animateTo(index / colors.length)将采用AnimationController中指定的持续时间，以从当前颜色到新颜色的任一方向进行动画处理。

这是一个live demo

这是相关的代码(仅显示您所做的更改)。我根据个人喜好更改了持续时间和动画物理。务必使用您喜欢的东西。

class _HomepageScreenState extends State<HomepageScreen>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<Color> animation;

  final colors = <TweenSequenceItem<Color>>[
      TweenSequenceItem(
        weight: 1.0,
        tween: ColorTween(begin: Colors.red, end: Colors.blue),
      ),
      TweenSequenceItem(
        weight: 1.0,
        tween: ColorTween(begin: Colors.blue, end: Colors.green),
      ),
      TweenSequenceItem(
        weight: 1.0,
        tween: ColorTween(begin: Colors.green, end: Colors.yellow),
      ),
      TweenSequenceItem(
        weight: 1.0,
        tween: ColorTween(begin: Colors.yellow, end: Colors.red),
      ),
    ];

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 600),
      vsync: this,
    );

    animation = TweenSequence<Color>(colors).animate(_controller)..addListener(() {
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: animation.value,
      body: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(
              child: PageView.builder(
                physics: new PageScrollPhysics(),
                itemCount: colors.length,
                controller: PageController(viewportFraction: 0.8),
                onPageChanged: ((int index) {
                  _controller.animateTo(index / colors.length);
                }),
                itemBuilder: (_, i) {
                  return Padding(
                    padding:
                        EdgeInsets.only(left: i % 2 == 0 ? 0 : 15, bottom: 20),
                    child: Container(),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}