Flutter中给卡片添加边框（2个例子）

前端开发 1年前 36

本文将向您介绍几个有关在 Flutter 中为卡片添加边框的实际示例。

卡片边框定制

要为 Card 小部件配置边框，请关注其shape属性。我们可以将此属性设置为以下类之一：

StadiumBorder：创建 stadium 边界
RoundedRectangleBorder：创建一个矩形边框（根据需要使用圆角）
BeveledRectangleBorder : 创建一个带有一个或多个平角的矩形边框

这个例子利用了所有这些类。您还将了解如何控制卡片边框的颜色和粗细。

预习

Flutter中给卡片添加边框（2个例子）

编码

注释中带有解释的代码：

Scaffold(
      appBar: AppBar(title: const Text('KindaCode.com')),
      body: Padding(
        padding: const EdgeInsets.all(20),
        // display a column of cards
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Card One
            Card(
              elevation: 10,
              shadowColor: Colors.blue.shade200,
              color: Colors.amber.shade100,
              // add & customize border with StadiumBorder class
              shape: StadiumBorder(
                side: BorderSide(
                  // border color
                  color: Colors.blue.shade200,
                  // border thickness
                  width: 5,
                ),
              ),
              child: Container(
                width: 300,
                height: 100,
                alignment: Alignment.center,
                child: const Text(
                  'StadiumBorder',
                  style: TextStyle(fontSize: 20),
                ),
              ),
            ),
            const SizedBox(
              height: 30,
            ),
            // Card Two
            Card(
              elevation: 10,
              shadowColor: Colors.blue.shade200,
              color: Colors.amber.shade100,
              // add & customize border with RoundedRectangleBorder class
              shape: RoundedRectangleBorder(
                  side: BorderSide(
                      // border color
                      color: Colors.blue.shade300,
                      // border thickness
                      width: 10)),
              child: Container(
                width: 330,
                height: 200,
                alignment: Alignment.center,
                child: const Text(
                  'RoundedRectangleBorder',
                  style: TextStyle(fontSize: 20),
                ),
              ),
            ),
            const SizedBox(
              height: 30,
            ),
            // Card Three
            Card(
              elevation: 10,
              shadowColor: Colors.blue.shade200,
              color: Colors.pink,
              // add & customize border with BeveledRectangleBorder class
              shape: BeveledRectangleBorder(
                  side: BorderSide(color: Colors.orange.shade500, width: 5),
                  borderRadius: const BorderRadius.only(
                    topLeft: Radius.elliptical(150, 80),
                  )),
              child: const SizedBox(
                width: 350,
                height: 160,
                child: Center(
                  child: Text('BeveledRectangleBorder',
                      style: TextStyle(fontSize: 20, color: Colors.white)),
                ),
              ),
            )
          ],
        ),
      ),
);

只有一侧边框的卡片

前面的示例演示了如何向卡片组件添加全边边框。如果你想构建一个单边边框（例如左边框或下边框）怎么办？解决方案是为卡片的子容器添加侧边框。 我们还可以根据需要使用ClipPath小部件来切断不需要的区域（靠近圆角）。

示例预览

此示例显示一张底部边框为蓝色的卡片和另一张左侧边框为琥珀色的卡片。

Flutter中给卡片添加边框（2个例子）

编码

Scaffold(
      appBar: AppBar(title: const Text('KindaCode.com')),
      body: Padding(
        padding: const EdgeInsets.all(30),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Card with a bottom border
            Card(
              elevation: 3,
              child: Container(
                padding: const EdgeInsets.only(
                    top: 20, bottom: 20, left: 30, right: 70),
                decoration: const BoxDecoration(
                  border: Border(
                    bottom: BorderSide(color: Colors.blue, width: 3),
                  ),
                ),
                child: const Text(
                  'Bottom Border',
                  style: TextStyle(fontSize: 30),
                ),
              ),
            ),
            const SizedBox(
              height: 30,
            ),
            // Card with a left border
            Card(
              elevation: 4,
              shape: const RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(10)),
              ),
              child: ClipPath(
                clipper: ShapeBorderClipper(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10))),
                child: Container(
                  padding: const EdgeInsets.only(
                      top: 20, bottom: 20, left: 30, right: 70),
                  decoration: const BoxDecoration(
                    border: Border(
                      left: BorderSide(color: Colors.amber, width: 8),
                    ),
                  ),
                  child: const Text(
                    'Left Border',
                    style: TextStyle(fontSize: 30),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
);