自定义卡片形状Flutter SDK

Question

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

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

我该怎么做？

- Developine

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

- Shady Aziza

---

使用RoundedRectangle可以使卡片获得圆角形状。但是，位于其中的图像并没有被卡片的圆形图像形状裁剪。我们该怎么做呢？谢谢！ - Santanu Karar

你需要使用 ClipRRect() 包裹图片 - https://docs.flutter.io/flutter/widgets/ClipRRect-class.html。 - Luke Stanyer

@aziza 怎么改变边框颜色？ - user9139407

这个答案非常有用，可以帮助理解如何为芯片添加边框和颜色！ - Amogh Mishra

使用圆角矩形边框和圆形后，只有下部分的卡片边缘被圆角化了，上部分没有。 - Adnan haider

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

- Lucas De Lavra Pinto

---

请记得在 Card 小部件中添加 elevation: 0 以删除默认阴影。 - Erisan Olasheni

我该如何将卡片的边框仅应用于单个边，例如仅应用于右侧边框？ - Pixie Dust

Answer 3

你还可以通过 ThemeData.cardTheme 全局自定义卡片主题：

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

- micimize

---

是的，这是模块化的方法。如果您在整个应用程序中具有相同的样式卡，则可以使用此方法。 - Developine

应该推荐使用这种方式！ - Cyril

Answer 4

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

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

您可以使用BorderRadius.only()来自定义您想要处理的角落。

- C. Skjerdal

Answer 5

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

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

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

- ijas

---

你也可以使用简写的 BorderRadius.circular(8) 代替 BorderRadius.all(Radius.circular(5.0))。 - Son Nguyen

Answer 6

你可以在卡片自定义圆形中以这种方式进行塑造，带有图标。

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

- Bhargav Raviya