使用颤振向 ClipRRect 添加阴影和彩色边框的最佳方法答案

【问题标题】：Best way to add a shadow and colored border to ClipRRect using flutter使用颤振向 ClipRRect 添加阴影和彩色边框的最佳方法
【发布时间】：2020-08-18 01:47:33
【问题描述】：

我有一个简单的ClipRRect 小部件，如下所示：

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(10),
          child: GridTile(
        child: Image.network(
          imageUrl,
          fit: BoxFit.cover,
        ),
        footer: GridTileBar(
          backgroundColor: Colors.black87,
          leading: IconButton(
            icon: Icon(Icons.favorite),
            color: Theme.of(context).accentColor,
            onPressed: () {},
          ),
          title: Text(
            title,
            textAlign: TextAlign.center,
          ),
          trailing: IconButton(
            icon: Icon(Icons.shopping_cart),
            onPressed: () {},
            color: Theme.of(context).accentColor,
          ),
        ),
      ),
    );
  }

我尝试通过用另一个 Card 小部件包装这个小部件来添加阴影，以添加带有 elevation 的阴影，如下代码所示：

@override
  Widget build(BuildContext context) {
    return Card(
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ),
        elevation: 5,
          child: ClipRRect(
        borderRadius: BorderRadius.circular(10),
            child: GridTile(
          child: Image.network(
            imageUrl,
            fit: BoxFit.cover,
          ),
          footer: GridTileBar(
            backgroundColor: Colors.black87,
            leading: IconButton(
              icon: Icon(Icons.favorite),
              color: Theme.of(context).accentColor,
              onPressed: () {},
            ),
            title: Text(
              title,
              textAlign: TextAlign.center,
            ),
            trailing: IconButton(
              icon: Icon(Icons.shopping_cart),
              onPressed: () {},
              color: Theme.of(context).accentColor,
            ),
          ),
        ),
      ),
    );
  }

但我认为这根本不合逻辑，因为它显示的网格项目有点小，而且我需要在这个网格中添加一个border..

我希望这足够清楚..

【问题讨论】：

标签： flutter dart

【解决方案1】：

您可以创建小部件以采用阴影和边框颜色，如下所示因为 ClipRRect 不能接受阴影或边框颜色，所以我们使用容器

clipRRect 构造函数

ClipRRect({Key key, BorderRadius borderRadius: BorderRadius.zero, CustomClipper<RRect> clipper, Clip clipBehavior: Clip.antiAlias, Widget child})

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      width: 200,
      child: Card(
        elevation: 4.0,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                bottomRight: Radius.circular(10),
                topRight: Radius.circular(10)),
            side: BorderSide(width: 2, color: Colors.green)),
        child: Center(
          child: Icon(
            Icons.movie,
            size: 150.0,
          ),
        ),
      ),
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(
            color: Colors.white54,
            blurRadius: 5.0,
            offset: Offset(0, 10),
            spreadRadius: 0.5,
          ),
        ],
        borderRadius: BorderRadius.circular(12),
      ),
    );
  }
}

【讨论】：

感谢您的支持，但我无法直接为ClipRRect 创建阴影和边框，对吗？我认为在您的示例中您刚刚删除了ClipRRect 以及
yes ` ClipRRect({Key key, BorderRadius borderRadius: BorderRadius.zero, CustomClipper clipper, Clip clipBehavior: Clip.antiAlias, Widget child}) ` 从它的构造函数中它不支持跨度>

【解决方案2】：

我像下面这样实现它

       Stack(alignment: Alignment.center, children: [
            Container(
              width: DeviceUtils.getScaledHeight(context, 0.072),
              height: DeviceUtils.getScaledHeight(context, 0.072),
              decoration: BoxDecoration(
                border: Border.all(color: Colors.green),
                borderRadius: BorderRadius.circular(8),
                boxShadow: [
                  BoxShadow(
                    color: Colors.white54,
                    blurRadius: 5.0,
                    offset: Offset(0, 10),
                    spreadRadius: 0.5,
                  ),
                ],
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8),
              child: ImageFromURL(
                  url: "https://i.pinimg.com/originals/63/81/a7/6381a77565b51a541d0d85cb145e7d94.jpg",
                  width: DeviceUtils.getScaledHeight(context, 0.07),
                  height: DeviceUtils.getScaledHeight(context, 0.07)),
            ),
          ])

【讨论】：