flutter - 为什么在容器中的图像后面有形状?

标签 flutter dart flutter-layout flutter-container

我试图制作一个带有圆角的卡片,但是当我这样做时,图像下方的卡片比图像大。以下是我的代码和应用程​​序一部分的屏幕截图,以向您展示我的问题。我希望您可以在屏幕截图中看到图像旁边的角落是一个形状。

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

the screenshot of my card

最佳答案

您忘记添加卡的形状。另外,您可以简化borderRadius:

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

您的结果将是以下内容:

example

关于flutter - 为什么在容器中的图像后面有形状?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61737352/

相关文章:

dart - Dart 中具有定义签名的函数列表

Flutter 回调 - 从子列表中删除一个小部件

相当于 layout_gravity ="bottom"的 Flutter

dart - 如何在Flutter中自定义SliverAppBar的flexibleSpace属性?

android - 任务 ':app:preDebugBuild' 的 Flutter 执行失败

dart - 如何在 dart 构建中启用 --enable-experimental-mirrors?

滚动期间的 Flutter- Listview 落后于小部件上方

dart - 仅从 firestore 返回对象列表一次,而不是流。在 flutter 中

flutter - Flutter BlendMode 'the getter isn' t定义'

flutter - 动画按钮旋转