自定义卡片形状 Flutter SDK

Posted 2023-02-23

【中文标题】自定义卡片形状 Flutter SDK

【英文标题】：Custom Card Shape Flutter SDK

【发布时间】：2018-11-18 06:50:07

【问题描述】：

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

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

提前致谢。

【问题讨论】：

你能分享你的代码吗？

【参考方案1】：

您可以使用它this way

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

【讨论】：

使用 RoundedRectangleBorder 我还可以得到一个圆形的卡片。但其中的图像 - 不会被卡片的圆形图像形状裁剪。我们怎么能做到这一点？谢谢！

@SantanuKarar 你把图片包裹在 ClipRRect() - docs.flutter.io/flutter/widgets/ClipRRect-class.html

@aziza 如何更改边框颜色？

这个答案对于理解如何为芯片添加边框和颜色非常有用！

使用 Roundedrectangle 边框与圆形后，它只圆底卡侧而不是上卡侧

【参考方案2】：

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

卡片主题可以使用ThemeData.cardTheme

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

【讨论】：

你也可以用简写BorderRadius.circular(8)代替BorderRadius.all(Radius.circular(5.0))。

【参考方案3】：

上述的替代解决方案

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

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

【参考方案4】：

当 Card 时我总是使用 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),
            ),
        ),
        ],
    ),
  ),
),

【讨论】：

记得将elevation: 0 添加到Card 小部件以移除默认阴影。

【参考方案5】：

您还可以使用ThemeData.cardTheme 全局自定义卡片主题：

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

【讨论】：

是的，这是模块化方法。如果您在整个应用程序中都有相同样式的卡片。

这应该是推荐的方式！