flutter 如何在FadeInImage中为占位符分配控件?

hwamh0ep  于 2023-04-22  发布在  Flutter
关注(0)|答案(3)|浏览(99)

验证码:

FadeInImage(
  placeholder: MyOwnWidget(), // error
  image: NetworkImage(url),
)

我想为placeholder提供我自己的小部件,我该怎么做,有什么解决方法吗?

0g0grzrc

0g0grzrc1#

似乎不可能使用FadeInImage,我将不得不使用

Image.network(
  url,
  loadingBuilder: (_, child, progress) {
    if (progress == null) return child;
    return MyOwnWidget();
  },
)
b09cbbtk

b09cbbtk2#

你可以这样做

Stack(
          children: <Widget>[
            const Center(child: CircularProgressIndicator()),
            Center(
              child: FadeInImage.memoryNetwork(
                placeholder: kTransparentImage,
                image: 'https://picsum.photos/250?image=9',
              ),
            ),
          ],
        )

对于透明图像,使用https://pub.dev/packages/transparent_image

dxpyg8gm

dxpyg8gm3#

只需将空字符串('')传递给placeholder,这将触发placeholderErrorBuilder回调。并提供占位符小部件。
你可以看看下面的例子。

return ClipOval(
  child: FadeInImage.assetNetwork(
    placeholder: '',
    image: url,
    fit: BoxFit.cover,
    width: width,
    height: height,
    fadeInDuration: const Duration(milliseconds: 400),
    fadeOutDuration: const Duration(milliseconds: 100),
    placeholderErrorBuilder: (context, error, stackTrace) => placeholder,
    imageErrorBuilder: (context, error, stackTrace) => placeholder,
  ),
);

placeholder小部件以供参考。

Widget placeholder = CircleAvatar(
  backgroundColor: Color(0xffE6E6E6),
  radius: 30,
  child: Icon(
    Icons.person,
    color: Color(0xffCCCCCC),
  ),
);

相关问题