如何在Flutter中对CachedNetworkImage使用视差效果？

Question

我想在列表视图上使用parallax_image。同时，我想在cached_network_image上使用视差效果。

Answer 1

parallax_image接受图像提供，并且Cached_Network_Image具有CachedNetworkImageProvider可以使用这种情况

代码段

ParallaxImage(
        extent: 150.0,
        image: CachedNetworkImageProvider(imageList[index]),
      ),

完整代码

import 'package:flutter/material.dart';
import 'package:parallax_image/parallax_image.dart';
import 'package:cached_network_image/cached_network_image.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Parallax Image Demo',
      theme: ThemeData(primarySwatch: Colors.blueGrey),
      home: MyHomePage(title: 'Parallax Image Demo'),
    );
  }
}

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

  List<String> imageList = [
    'https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80',
    'https://images.unsplash.com/photo-1522205408450-add114ad53fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=368f45b0888aeb0b7b08e3a1084d3ede&auto=format&fit=crop&w=1950&q=80',
    'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80'
  ];

  @override
  Widget build(BuildContext context) {
    print('${imageList[0]}');
    final theme = Theme.of(context);
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Column(
        children: <Widget>[
          Container(
            padding: const EdgeInsets.all(20.0),
            child: Text(
              'Horizontal scroll parallax',
              style: theme.textTheme.title,
            ),
          ),
          Container(
            padding: const EdgeInsets.symmetric(vertical: 10.0),
            constraints: const BoxConstraints(maxHeight: 200.0),
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: imageList.length,
              itemBuilder: _buildHorizontalChild,
            ),
          ),
          Container(
            padding: const EdgeInsets.all(20.0),
            child: Text(
              'Vertical scroll parallax',
              style: theme.textTheme.title,
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: imageList.length,
              itemBuilder: _buildVerticalChild,
            ),
          )
        ],
      ),
    );
  }

  Widget _buildVerticalChild(BuildContext context, int index) {
    /*index++;
    if (index > 7) return null;*/
    return Padding(
      padding: const EdgeInsets.only(bottom: 10.0),
      child: GestureDetector(
        onTap: () {
          print('Tapped $index');
        },
        child: ParallaxImage(
          extent: 150.0,
          image: CachedNetworkImageProvider(imageList[index]),
        ),
      ),
    );
  }

  Widget _buildHorizontalChild(BuildContext context, int index) {
    /*index++;
    if (index > 7) return null;*/
    return Padding(
      padding: const EdgeInsets.only(right: 10.0),
      child: ParallaxImage(
        extent: 150.0,
        image: CachedNetworkImageProvider(imageList[index]),
      ),
    );
  }
}