首页 > 解决方案 > 如何在颤动中为 FadeInImage.assetNetwork 图像赋予圆角矩形?

问题描述

您好我正在使用 FadeInImage.assetNetwork 来显示我的图像。但是无论我尝试什么,我都没有得到圆角矩形边框。我尝试了 Clipperrect,但图像没有被剪裁,但卡片被剪裁了。我什至尝试将 FadeInImage.assetNetwork 包装在 CLipperect 中,并尝试包装在容器中并进行装饰,例如this.But 似乎没有什么能给出预期的结果。

简而言之,图像没有被剪裁,但卡片被剪裁了。我们如何解决这个问题?

decoration: ShapeDecoration(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(
        Radius.circular(10),
      ),
Container(
              height: MediaQuery.of(context).size.height * 0.27,
              color: Colors.black,
              child: ListView.builder(
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                itemCount: __moviesMovieId.length,
                itemBuilder: (BuildContext context, int index) => Card(

                  margin: const EdgeInsets.fromLTRB(0, 0, 15, 0),
                  child: FadeInImage.assetNetwork(
                    width: MediaQuery.of(context).size.width * 0.3,
                    image:
                        'https://img.youtube.com/vi/${__moviesMovieId[index].substring(8)}/0.jpg',
                    placeholder: cupertinoActivityIndicator,
                    fit: BoxFit.fill,
                  ),
                ),
              ),
            ),

标签: flutterdart

解决方案


PhysicalModel(
    clipBehavior: Clip.antiAliasWithSaveLayer,
    color: Colors.black,
    shape: BoxShape.rectangle,
    borderRadius: BorderRadius.circular(30),
    child: FadeInImage.assetNetwork(
      width: MediaQuery.of(context).size.width * 0.3,
      image:
          'https://img.youtube.com/vi/${__moviesMovieId[index].substring(8)}/0.jpg',
      placeholder: "hey",
      fit: BoxFit.fill,
    ),
  ),

将您的 Card 从 ListView Builder 替换为此,绝对可以正常工作。上面的其他答案在我的设备中不起作用,所以我回答了。如果有帮助,请将其标记为答案


推荐阅读