矩形框在Flutter中的实现

18 浏览
0 Comments

矩形框在Flutter中的实现

在我的代码中，有这个 CircleAvtar，我想用一个大的长方形框来代替它。我是 Flutter 新手，我很难实现这一点。

 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: [
                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),
                        ),
                ),

我想让它看起来像这样：\"enter

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

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

0
0 Comments

如果您能向我们展示您当前的代码输出，我可能可以更好地帮助您。但是，就我所了解的而言，您可以简单地使用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)
      ),

0