颤振中的矩形框答案

【问题标题】：RectangleBox In Flutter颤振中的矩形框
【发布时间】：2020-12-23 15:08:53
【问题描述】：

在我的代码中，有一个 CircleAvtar，我想用一个大矩形框替换它。我是新来的，我发现很难做到这一点。

 child: Card(
          elevation: 3,
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
          child: Container(
            margin: EdgeInsets.all(5),
            padding: EdgeInsets.all(5),
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(
                10,
              ),
              // border: Border.all(width: 0.5),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(5)),
                    color: whiteColor,
                  ),
                  child: expertiseSearchModel.userImageURL.isEmpty
                      ? CircleAvatar(
                          radius: 35,
                          child: SvgPicture.asset(
                            'assets/images/default_user_image.svg',
                            // height: screenUtil.setSp(80),
                            // width: screenUtil.setSp(80),
                            fit: BoxFit.contain,
                          ),
                        )
                      : CircleAvatar(
                          radius: 35,
                          backgroundImage:
                              NetworkImage(expertiseSearchModel.userImageURL),
                        ),
                ),

我希望它看起来像这样：

【问题讨论】：

您的代码目前得到了什么？那么，你为什么不使用卡片代替你的容器，并且图像应该是使用 BoxDecoraton 类中的 DecorationImage 小部件的子容器的背景

标签： flutter dart flutter-layout

【解决方案1】：

在你的主容器中，使用列作为子容器，将另一个容器作为子容器，并使用容器的 Image 装饰属性来显示图片。您可以将子容器的边框半径更改为具有这些圆形边缘。

【讨论】：

【解决方案2】：

如果您可以向我们展示您当前的代码给出的输出，也许我可以为您提供更多帮助。但据我了解，您可以简单地使用 Image.Network() 来显示图像并删除圆形头像

试试这个，如果它有效，如果不是让我知道我会相应地编辑它

Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(5)),
          color: whiteColor,
        ),
        child: expertiseSearchModel.userImageURL.isEmpty
            ? CircleAvatar(
                radius: 35,
                child: SvgPicture.asset(
                  'assets/images/default_user_image.svg',
                  // height: screenUtil.setSp(80),
                  // width: screenUtil.setSp(80),
                  fit: BoxFit.contain,
                ),
              )
            : Image.network(expertiseSearchModel.userImageURL)
      ),

【讨论】：

有效。非常感谢。你能告诉我如何添加边框半径吗？
ClipRRect( borderRadius: BorderRadius.circular(8.0), child: Image.network( subject['images']['large'], height: 150.0, width: 100.0, ), ) 请参阅this 问题了解更多详情，请投票给答案:)）谢谢