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

Question

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

当我在 ListView 中创建一个带有框阴影的容器（水平滚动）时，阴影看起来不错，但是，当我在 ListView 中添加多个容器时，它们的阴影（只是阴影，而不是容器）在顶部和底部被裁剪。

另请注意，整个 ListView 都包裹在父容器下。

我试图增加父容器的高度（整个 ListView 被包裹在其中），但它增加了子容器的高度，其阴影仍然被裁剪。

我还尝试为父容器提供填充，但是阴影仍然会被裁剪。

也许我需要将 ListView 包装在任何其他可以毫无问题地完成工作的小部件中。

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,
      ),
    ],
  ),
),

Run Code Online (Sandbox Code Playgroud)

我希望 ListView 有容器（作为自定义卡片）有适当的 BoxShadow，但在实际输出中，容器的 BoxShadow 被从顶部和底部裁剪。

Answer 1

Mat*_*ini 11

正如@Zahra 所写，

添加clipBehavior: Clip.none,到ListView，解决了问题。

仅当您的小部件超过屏幕尺寸时才会发生裁剪

Answer 2

Aka*_*vya 8

好的，我自己找到了解决方案。

解决问题的步骤

创建几个具有一定宽度和半径为 10.0 的 BoxShadow 的容器（作为卡片）。让我们称之为子容器。
创建一个带有水平滚动轴的 ListView。将上面制作的子容器放在此 ListView 中。
现在将 ListView 包裹在一个新的容器中（让我们称之为父容器）以给 ListView 一个高度。如果您希望子容器的高度为 140.0，则将父容器的高度设为 160.0，其中包括顶部和底部各 10.0 的 BoxShadow 半径（10.0+ 140.0 + 10.0）。
现在在顶部和底部为 10.0 的 ListView 提供填充。
问题解决了（傻我）。

示例代码在这里

Container(
  height: 160.0,
  child: ListView(
    padding: EdgeInsets.only(top: 10.0, bottom: 10.0),
    shrinkWrap: true,
    scrollDirection: Axis.horizontal,
    children: <Widget>[
      SizedBox(
        width: 30.0,
      ),
      Container(
        width: 340.0,
        // height: 140.0,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10.0),
          boxShadow: [
            BoxShadow(
              blurRadius: 10.0,
              color: Colors.black12,
            )
          ],
        ),
        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: 20.0, bottom: 20.0),
              child: Column(
                crossAxisAlignment:
                    CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    'BadAss Genuine',
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w400,
                      fontSize: 18.0,
                    ),
                  ),
                  SizedBox(
                    height: 3.0,
                  ),
                  Text(
                    'Leather Boots',
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w400,
                      fontSize: 18.0,
                    ),
                  ),
                  SizedBox(
                    height: 12.0,
                  ),
                  Container(
                    height: 1.0,
                    width: 150.0,
                    color: Color(0xff643523),
                  ),
                                      SizedBox(
                    height: 12.0,
                  ),
                  Row(
                    children: <Widget>[
                      SizedBox(
                        width: 110.0,
                      ),
                      Container(
                        height: 30.0,
                        width: 30.0,
                        child: Image.asset(
                            'assets/images/boot.png'),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      SizedBox(
        width: 30.0,
      ),
      Container(
        //This is actual custom Card
        width: 340.0,
        // height: 140.0,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10.0),
          boxShadow: [
            BoxShadow(
              blurRadius: 10.0,
              color: Colors.black12,
            )
          ],
        ),
        child: Row(
          children: <Widget>[
            Container(
              padding: EdgeInsets.fromLTRB(
                  30.0, 20.0, 25.0, 20.0),
              child:
                  Image.asset('assets/images/gloves.png'),
            ),
            Container(
              padding:
                  EdgeInsets.only(top: 20.0, bottom: 20.0),
              child: Column(
                crossAxisAlignment:
                    CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    'Highly Durable',
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w400,
                      fontSize: 18.0,
                    ),
                  ),
                  SizedBox(
                    height: 3.0,
                  ),
                  Text(
                    'Riding Gloves',
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w400,
                      fontSize: 18.0,
                    ),
                  ),
                  SizedBox(
                    height: 12.0,
                  ),
                  Container(
                    height: 1.0,
                    width: 150.0,
                    color: Color(0xff643523),
                  ),
                  SizedBox(
                    height: 12.0,
                  ),
                  Row(
                    children: <Widget>[
                      SizedBox(
                        width: 110.0,
                      ),
                      Container(
                        height: 30.0,
                        width: 30.0,
                        child: Image.asset(
                            'assets/images/glove.png'),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      SizedBox(
        width: 30.0,
      ),
      Container(
        //This is actual custom Card
        width: 340.0,
        // height: 140.0,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10.0),
          boxShadow: [
            BoxShadow(
              blurRadius: 10.0,
              color: Colors.black12,
            )
          ],
        ),
        child: Row(
          children: <Widget>[
            Container(
              padding: EdgeInsets.fromLTRB(
                  30.0, 20.0, 25.0, 20.0),
              child:
                  Image.asset('assets/images/helmet.png'),
            ),
            Container(
              padding:
                  EdgeInsets.only(top: 20.0, bottom: 20.0),
              child: Column(
                crossAxisAlignment:
                    CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    'German Hat',
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w400,
                      fontSize: 18.0,
                    ),
                  ),
                  SizedBox(
                    height: 3.0,
                  ),
                  Text(
                    'Riding Helmet',
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w400,
                      fontSize: 18.0,
                    ),
                  ),
                  SizedBox(
                    height: 12.0,
                  ),
                  Container(
                    height: 1.0,
                    width: 150.0,
                    color: Color(0xff643523),
                  ),
                  SizedBox(
                    height: 12.0,
                  ),
                  Row(
                    children: <Widget>[
                      SizedBox(
                        width: 110.0,
                      ),
                      Container(
                        height: 30.0,
                        width: 30.0,
                        child: Image.asset(
                            'assets/images/helmeticon.png'),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      SizedBox(
        width: 30.0,
      ),
    ],
  ),
),

Run Code Online (Sandbox Code Playgroud)

您可以通过将 Clip 设置为 none 来使用 listView 内的 Clip 选项：``clipBehavior: Clip.none`` (4认同)
这最终会导致 ListView 和同一列或行中的其他小部件之间出现更大的间隙。 (2认同)

归档时间：	6 年，7 月前
查看次数：	4604 次
最近记录：	4 年，9 月前