0

我试着做一张圆角的卡片,但是当我这样做时,图像下方的卡片比图像大。下面是我的代码和我的应用程序的一部分的屏幕截图,向您展示我的问题。我希望你能在截图上看到,在图片旁边,角落里有一个形状。

Card(
                child: InkWell(
                  splashColor: Colors.blue.withAlpha(30),
                  onTap: () {
                    Navigator.of(context).push(MaterialPageRoute(
                      builder: (context) => BodyConstruction(),
                    ));
                  },
                  child: ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(30)),
                    child: Image.asset('images/Bild1.jpg'),
                  )
                ),
              ),

我的卡片截图

4

2 回答 2

1

尝试这样的事情:

卡片(形状:RoundedRectangleBorder(borderRadius:BorderRadius.circular(15.0),),

您可以使用多种形状属性。这是颤振文档:

https://api.flutter.dev/flutter/painting/ShapeBorder-class.html

您拥有的代码仅适用于图像,而不适用于卡片本身。希望有帮助。

于 2020-05-11T19:10:43.240 回答
1

您忘记添加卡片的形状。此外,您可以简化您的边界半径:

Card(shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(30)
      ),
      child: InkWell(
            splashColor: Colors.blue.withAlpha(30),
            onTap: () {
               Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) => BodyConstruction(),
                ));
            },
            child: ClipRRect(
              borderRadius: BorderRadius.circular(30),
              child: Image.asset('images/Bild1.jpg'),
            ),
          ),
        )

您的结果将如下所示:

例子

于 2020-05-11T19:12:09.447 回答