自定义卡片形状扑动 SDK

我用 Flutter 上的 GridView 开发了一个应用程序。GridView 项是 Card，默认的卡形状是矩形，半径为4。

我知道有形状属性的卡小部件，它需要 ShapeBorder 类，但我无法找到如何使用 ShapeBorder 类和自定义我的卡在 GridView。

我该怎么做？

249756 次浏览
小开

你可以用它 这边

enter image description here

Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Text(
'Card with circular border',
textScaleFactor: 1.2,
),
),
Card(
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Text(
'Card with Beveled border',
textScaleFactor: 1.2,
),
),
Card(
shape: StadiumBorder(
side: BorderSide(
color: Colors.black,
width: 2.0,
),
),
child: Text(
'Card with Stadium border',
textScaleFactor: 1.2,
),
),
小开

你也可以使用 ThemeData.cardTheme在全球范围内定制卡片主题:

MaterialApp(
title: 'savvy',
theme: ThemeData(
cardTheme: CardTheme(
shape: RoundedRectangleBorder(
borderRadius: const BorderRadius.all(
Radius.circular(8.0),
),
),
),
// ...
小开

当 Card 时，我总是使用 RoundedRectangle镶边。

Card(
color: Colors.grey[900],
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.white70, width: 1),
borderRadius: BorderRadius.circular(10),
),
margin: EdgeInsets.all(20.0),
child: Container(
child: Column(
children: <Widget>[
ListTile(
title: Text(
'example',
style: TextStyle(fontSize: 18, color: Colors.white),
),
),
],
),
),
),
小开

上述问题的另一种解决方案

Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20))),
color: Colors.white,
child: ...
)

您可以使用 BorderRadius.only ()来自定义希望管理的角。

小开

自定义卡片半径(还有其他选项)的更好方法是为卡片设置全局主题。这样您就可以在整个应用程序中对 Card 使用相同的样式。您还可以将此方法用于其他许多小部件。

对于卡片主题，您可以使用 ThemeData.cardTheme

MaterialApp(
title: 'MySampleApp',
theme: ThemeData(
cardTheme: CardTheme(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(16.0),
),
),
),
// ............
// ............

提交答案