flutter 浮动颜色圆形边框

ktecyv1j  于 2023-05-01  发布在  Flutter
关注(0)|答案(1)|浏览(138)

我有下面的代码和一个附加的图像.我如何圆的角落的圆圈部分的形象?我曾试图圆角的形象和底部部分的容器,但无法实现一个顺利的圆形边界。tia

class NewsCardWidget extends StatelessWidget {
  final News news;

  const NewsCardWidget({
    Key? key,
    required this.news,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.black,
          width: 10,
        ),
        borderRadius: BorderRadius.circular(10),
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.2),
            spreadRadius: 3,
            blurRadius: 7,
            offset: const Offset(0, 3),
          )
        ],
      ),
      alignment: Alignment.center,
      child: Column(
        children: [
          Flexible(
            child: Container(
              decoration: BoxDecoration(
                image: news.image != ''
                    ? DecorationImage(
                        image: NetworkImage('${news.image}'),
                        fit: BoxFit.cover,
                      )
                    : const DecorationImage(
                        image: AssetImage('assets/image/newspaper.png'),
                        fit: BoxFit.fill,
                      ),
              ),
            ),
          ),
          Container(
            padding: const EdgeInsets.all(15),
            decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(10),
                bottomRight: Radius.circular(10),
              ),
            ),
            child: Row(),
          ),
        ],
      ),
    );
  }
}

whlutmcx

whlutmcx1#

使用ClipRRect Package 包含图像的Container小部件,向父容器添加填充以创建边框效果并将颜色更改为黑色。

class NewsCardWidget extends StatelessWidget {
  final News news;

  const NewsCardWidget({
    Key? key,
    required this.news,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(10.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: Colors.black,
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.2),
            spreadRadius: 3,
            blurRadius: 7,
            offset: const Offset(0, 3),
          )
        ],
      ),
      alignment: Alignment.center,
      child: Column(
        children: [
          Flexible(
            child: ClipRRect(
              borderRadius: const BorderRadius.all(Radius.circular(10.0)),
              child: Container(
                decoration: const BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('assets/images/don.png'),
                    fit: BoxFit.fill,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

看起来是这样的。

相关问题