如何在底部和所有侧面创建带有盒子阴影的容器

Posted 2023-02-23

【中文标题】如何在底部和所有侧面创建带有盒子阴影的容器

【英文标题】：How to create container with box shadow at bottom and all sides

【发布时间】：2020-12-17 00:54:54

【问题描述】：

我尝试创建一个带有盒子阴影的容器，但无法获得我想要的相同结果。这是我achieved，但我想显示带有圆形边缘的阴影和带有底部阴影的水平列表之一和带有所有侧阴影的第二个。我还需要低厚度的阴影。我的列表有背景图片和文字。请帮助我如何实现这一目标。

我的代码

 Container(
                height: 180.0,
                child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: response.data.length,
                    itemBuilder: (context, index) 
                      return GestureDetector(
                        behavior: HitTestBehavior.translucent,
                        onTap: () ,
                        child: Container(
                          decoration: BoxDecoration(
                              image: DecorationImage(
                                  image: CachedNetworkImageProvider(
                                    response.data[index].imageUrl,
                                  ),
                                  fit: BoxFit.fill)),
                          margin: EdgeInsets.only(bottom: 6.0, right: 10.0),
                          width: MediaQuery.of(context).size.width - 100,
                          child: Container(
                            width: MediaQuery.of(context).size.width - 100,
                            margin: EdgeInsets.only(left: 8.0, right: 6.0),
                            decoration: BoxDecoration(
                              boxShadow: <BoxShadow>[
                                BoxShadow(
                                    color: Color(0xff000000).withOpacity(.9),
                                    blurRadius: 10.0,
                                    spreadRadius: 2.0,
                                    offset: Offset(0.0, 180))
                              ],
                            ),
                            child: Padding(
                              padding: const EdgeInsets.fromLTRB(
                                  10.0, 35.0, 5.0, 0.0),
                              child: Text(
                                response.data[index].name.toUpperCase(),
                                style: GoogleFonts.roboto(
                                    textStyle: TextStyle(
                                        fontSize: 15,
                                        fontWeight: FontWeight.bold,
                                        color: Color(0xffFFFFFF))),
                              ),
                            ),
                          ),
                        ),
                      );
                    ),
              )

【问题讨论】：

然后发布您的代码

添加你的代码，让我们看看你到目前为止做了什么

offset: Offset(0.0, 180) - 它将阴影 180 像素推到底部，这不是你想要的吗？

【参考方案1】：

这可能会有所帮助

boxShadow: [
              BoxShadow(
                  color: Colors.grey.withOpacity(0.5),
                  spreadRadius: 2,
                  blurRadius: 3,
                  offset: Offset(0, 4)),
            ],

Ref*** ref

【参考方案2】：

使用 BoxShadow 的 offset 属性来控制阴影的可见性和 radius 属性来控制阴影的厚度。

【讨论】：

对于这种模糊的答案，请使用comment

您能提供更多信息吗？示例代码会有所帮助。