Question

我想显示一个灰色的占位符图像，然后加载主图像并使其淡入以替换占位符。我的问题是，它首先像这样淡化为白色：

占位符=>白色=>主图像。

如何使转场直接淡入主图像？即。像这样：

占位符=>主图片

下面是显示问题的示例：

这是示例代码

import 'package:flutter/material.dart';

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


class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  // Asset image is from
  // https://pmcvariety.files.wordpress.com/2019/05/rexfeatures_10243377aa-e1571431046745.jpg?w=700&h=393&crop=1
  ImageProvider placeholder = AssetImage('assets/placeholder-600x400.png');
  ImageProvider mainImg;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Fade',
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: beginLoadImage,
          child: Icon(Icons.file_download),
        ),
        body: Center(
            child: mainImg == null
                ? Image(
                    image: placeholder,
                  )
                : FadeInImage(
                    image: mainImg,
                    placeholder: placeholder,
                  )),
      ),
    );
  }

  void beginLoadImage() {
    setState(() => mainImg = NetworkImage(
        'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Surrender_of_Lord_Cornwallis.jpg/1280px-Surrender_of_Lord_Cornwallis.jpg'));
  }
}

Answer 1

那是因为您的基本颜色是白色，所以您可以将FadeInImage放入堆栈

示例：

      Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage("images/grey.jpg"),
                fit: BoxFit.cover,
              ),
            ),
            child: Center(child: CircularProgressIndicator()),
          ),
          Swiper(
            autoplay: true,
            autoplayDelay: 7000,
            itemCount: homeScreenBannerData.length,
            itemBuilder: (context, index) {
              return FadeInImage.memoryNetwork(
                key: UniqueKey(),
                placeholder: kTransparentImage,
                image: homeScreenBannerData[index].url,
                fit: BoxFit.cover,
              );
            },
            pagination: SwiperPagination(
              alignment: Alignment(0, 0.8),
              builder: SwiperCustomPagination(
                builder: (context, config) {
                  return Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: range(config.itemCount)
                        .map(
                          (e) => Container(
                            width: App.util.setSp(
                              e == config.activeIndex ? 13 : 7,
                            ),
                            height: App.util.setSp(
                              e == config.activeIndex ? 13 : 7,
                            ),
                            margin: EdgeInsets.symmetric(
                              horizontal: App.util.setWidth(7),
                            ),
                            decoration: BoxDecoration(
                              color: App.baseColor,
                              shape: BoxShape.circle,
                            ),
                          ),
                        )
                        .toList(),
                  );
                },
              ),
            ),
          ),
        ],
      )

FadeInImage不是“无间隙的”

1 个答案: