如何修复 Flutter 中水平列表视图中的裁剪阴影

2023-12-29

当我在 ListView 内创建一个带有框阴影的容器(水平滚动)时,阴影看起来很好,但是,当我在 ListView 内添加多个容器时,它们的阴影(只是阴影,而不是容器)在顶部和底部被裁剪。

另请注意,整个 ListView 包装在父容器下。

我尝试增加父容器的高度(整个 ListView 被包裹在其中),但它增加了子容器的高度,其阴影仍然被裁剪。

我还尝试为父容器提供填充,但它的阴影仍然被裁剪。

也许我需要将 ListView 包装在任何其他 Widget 中,这样就可以毫无问题地完成工作。

Container(
  // padding: EdgeInsets.only(left: 30.0, right: 0.0),
  height: 140.0,
  child: ListView(
    scrollDirection: Axis.horizontal,
    children: <Widget>[
      SizedBox(
        width: 30.0,
      ),
      Container(
        //This is actual custom Card
        width: 340.0,
        height: 140.0,
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
              color: Colors.black12,
              offset: Offset.zero,
              blurRadius: 10.0,
              spreadRadius: 0.0,
            )
          ],
          color: Colors.white,
          borderRadius: BorderRadius.circular(10.0),
        ),
        child: Row(
          children: <Widget>[
            Container(
              padding: EdgeInsets.fromLTRB(
                  30.0, 20.0, 25.0, 20.0),
              child: Image.asset(
                  'assets/images/leather_boot.png'),
            ),
            Container(
              padding:
                  EdgeInsets.only(top: 30.0, bottom: 30.0),
              child: Column(
                crossAxisAlignment:
                    CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    'BadAss Genuine',
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w500,
                      fontSize: 18.0,
                    ),
                  ),
                  SizedBox(
                    height: 3.0,
                  ),
                  Text(
                    'Leather Boots',
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w500,
                      fontSize: 18.0,
                    ),
                  ),
                  SizedBox(
                    height: 12.0,
                  ),
                  Container(
                    height: 1.5,
                    width: 150.0,
                    color: Color(0xff643523),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      SizedBox(
        width: 30.0,
      ),
      Container(
        //This is actual custom Card
        width: 340.0,
        height: 140.0,
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
              color: Colors.black12,
              offset: Offset.zero,
              blurRadius: 10.0,
              spreadRadius: 0.0,
            )
          ],
          color: Colors.white,
          borderRadius: BorderRadius.circular(10.0),
        ),
        child: Row(
          children: <Widget>[
            Container(
              padding: EdgeInsets.fromLTRB(
                  30.0, 20.0, 25.0, 20.0),
              child: Image.asset(
                  'assets/images/leather_boot.png'),
            ),
            Container(
              padding:
                  EdgeInsets.only(top: 30.0, bottom: 30.0),
              child: Column(
                crossAxisAlignment:
                    CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    'BadAss Genuine',
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w500,
                      fontSize: 18.0,
                    ),
                  ),
                  SizedBox(
                    height: 3.0,
                  ),
                  Text(
                    'Leather Boots',
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w500,
                      fontSize: 18.0,
                    ),
                  ),
                  SizedBox(
                    height: 12.0,
                  ),
                  Container(
                    height: 1.5,
                    width: 150.0,
                    color: Color(0xff643523),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      SizedBox(
        width: 30.0,
      ),
    ],
  ),
),

我希望 ListView 的容器(作为自定义卡)具有适当的 BoxShadow,但在实际输出中,容器的 BoxShadow 会从顶部和底部被裁剪。


正如@Zahra 所写,

adding clipBehavior: Clip.none, to the ListView,解决了问题。

仅当您的小部件超出屏幕尺寸时才会进行裁剪

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何修复 Flutter 中水平列表视图中的裁剪阴影 的相关文章