圆角的卡片小部件，右边框呈抖动状

Question

我必须创建一个像this这样的Card，我已经编写了以下代码来实现所需的UI，但是它没有按预期工作，

Card( elevation: 5, shape: RoundedRectangleBorder( borderRadius: BorderRadius.only( bottomRight: Radius.circular(10), topRight: Radius.circular(10)), side: BorderSide(width: 5, color: Colors.green)), child: ListTile(), )

上面的代码产生了this，而使用下面的代码

Card(
     elevation: 5,
     shape: Border(right: BorderSide(color: Colors.red, width: 5)),
     child: ListTile(),
    )

生成了this输出。如何在Flutter中创建所需的UI？

Answer 1

在Card小部件中使用shape参数，例如：

Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
      ),
      child: Container() )

Answer 2

我已经使用ClipPath来实现问题中提到的UI，请查看以下代码。

Card(
     elevation: 2,
     child: ClipPath(
       child: Container(
              height: 100,
              decoration: BoxDecoration(
              border: Border(right: BorderSide(color: Colors.green, width: 5))),
            ),
       clipper: ShapeBorderClipper(shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(3))),
               ),
    )

这给出以下输出，

如果有更好的方法达到上述结果，请回答。

Answer 3

您应将Card放在ClipRRect小部件内：

     return ClipRRect(
              borderRadius: BorderRadius.circular(15.0),
              child: Card(
                elevation: 5,
                shape: Border(right: BorderSide(color: Colors.red, width: 5)),
                child: ListTile(),
       ),
     );

但是我建议您减小elevation的值，因为它会使小的圆形边界变形。

Answer 4

对我来说，所有使用裁剪的解决方案都消除了一些阴影。无论如何，我找到了一个更简单的imo解决方案：

将卡片的子代包装在Container小部件周围。为卡片指定圆角矩形边框，然后为容器指定彩色边框。

Card(
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
    child: Container(
        decoration: BoxDecoration(
            border: Border(right: BorderSide(color: Colors.red, width: 8)
        ),
        child: // your card content
    )
)

Answer 5

您可以通过以下方式实现此目的：使用shape属性并在RoundedRectangleBorder内分配Card类，然后在side中添加RoundedRectangleBorder属性

BorderSide，用于描述盒子的每一面。

Container(
  padding: const EdgeInsets.only(right: 8.0, left: 8.0),
  height: 60,
  child: Card(
    elevation: 2,
    shape: RoundedRectangleBorder(
        side: BorderSide(color: appThemeColor.shade200, width: 0.5),
        borderRadius: BorderRadius.circular(5)),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
                topRight: Radius.circular(15),
                bottomRight: Radius.circular(15)),
            color: Colors.deepPurple,
          ),
          width: 5,
        ),
      ],
    ),
  ),
)

Answer 6

此解决方案对我有用。如果我们从卡中删除shape属性，则该属性会留下矩形的白色角。 elevation不受任何限制。

              Card(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(15.0),
                ),
                shadowColor: Colors.blueAccent,
                elevation: 15,
                child: ClipPath(
                  clipper: ShapeBorderClipper(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(15))),
                  child: Container(
                    height: 180,
                      decoration: BoxDecoration(
                        border: Border(
                            left: BorderSide(color: Colors.red, width: 15)),
                        color: Colors.yellowAccent.shade100,
                      ),
                      padding: EdgeInsets.all(20.0),
                      alignment: Alignment.centerLeft,
                      child: Container()),
                ),
              )

Answer 7

我只是在 paresh's answer 上添加了 IntrinsicHeight 和 CrossAxisAlignment.stretch，因此右边框的高度被拉伸。

Container(
        child: Card(
      elevation: 2,
      shape: RoundedRectangleBorder(
          side: BorderSide(color: Colors.green, width: 0.5),
          borderRadius: BorderRadius.circular(5)),
      //Wrap with IntrinsicHeight
      child: IntrinsicHeight(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          //Add CrossAxisAlignment.stretch
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 8.0),
                    child: Text("Text 1"),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 8.0),
                    child: Text("Text 2"),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 8.0),
                    child: Text("Text 3"),
                  ),
                ],
              ),
            ),
            Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                    topRight: Radius.circular(15),
                    bottomRight: Radius.circular(15)),
                color: Colors.green,
              ),
              width: 5,
            ),
          ],
        ),
      ),
    ))