我曾尝试制作一个带有圆角的卡片,但是当我这样做时,图像下方的卡片比图像大。以下是我的代码和应用程序一部分的屏幕截图,以向您展示我的问题。希望您可以在屏幕快照中看到图像旁边的角落中是一个形状。
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'),
)
),
),
尝试这样的事情:
卡(形状:RoundedRectangleBorder(borderRadius:BorderRadius.circular(15.0),),
您可以使用多种形状属性。这是该文件的文档:
https://api.flutter.dev/flutter/painting/ShapeBorder-class.html
您拥有的代码仅适用于图像,而不适用于卡本身。希望有帮助。
您忘记添加卡的形状。另外,您可以简化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'),
),
),
)
您的结果将是以下内容: