自定义卡片形状Flutter SDK

Question

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

我知道 Card Widget 有 shape 属性，并且它需要 ShapeBorder 类，但我无法找到如何使用 ShapeBorder 类并在 GridView 中自定义我的卡片。

我该怎么办？

Answer 1

你可以这样使用它

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

Answer 2

当卡片时我总是使用 RoundedRectangleBorder。

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

Answer 3

您还可以使用

ThemeData.cardTheme

全局自定义卡片主题：

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

Answer 4

上述问题的替代解决方案

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

您可以使用 BorderRadius.only() 自定义您想要管理的角点。

Answer 5

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

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

ThemeData.cardTheme

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

Answer 6

您可以在带有图标的卡片自定义圆圈中塑造这样的形状

Card(
  elevation: 20,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(100),
  ),
  child: const Icon(
    Icons.list,
    size: 92,
  ),
)