带有右边框的圆角卡片小部件颤动答案

【问题标题】：Rounded corner Card Widget with right border in flutter带有右边框的圆角卡片小部件颤动
【发布时间】：2019-08-14 10:32:37
【问题描述】：

我必须像这样创建一张卡片：

我编写了下面的代码来实现所需的 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(),
)

上面的代码产生了这个：

而使用下面的代码：

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

生成此输出：

如何在 Flutter 中创建所需的 UI？

【问题讨论】：

也许你可以尝试用 ClipOval 包裹你的卡片

标签： dart flutter

【解决方案1】：

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

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

【讨论】：

【解决方案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))),
               ),
    )

这给出了以下输出，

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

【讨论】：

@david-bronn，请看我的回答，因为我在实施过程中遇到了问题。我有白色的卡角。

【解决方案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 的值，因为它会扭曲小圆形边框。

【讨论】：

这个，很遗憾，只是剪掉了卡片和阴影，无法再现圆角卡片的效果。

【解决方案4】：

这个解决方案对我有用。如果我们从卡片中删除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()),
                ),
              )

【讨论】：

关闭所有我尝试过的答案，这是唯一一个正确的答案。
这里也一样，谢谢@Ian

【解决方案5】：

您可以通过这种方式实现，使用shape 属性并在Card 中分配RoundedRectangleBorder 类并在RoundedRectangleBorder 中添加side 属性

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

【讨论】：

【解决方案6】：

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

将卡片的子元素包裹在 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
    )
)

【讨论】：

遗憾的是边框边从卡体延伸到圆角的外侧。

【解决方案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,
            ),
          ],
        ),
      ),
    ))

【讨论】：

【解决方案8】：

除了使用卡片之外，您还可以使用容器来实现此目的，您可以使用BoxDecoration 上的gradient 属性。 stops 属性将确定边框的宽度。然后你可以添加你的颜色并有一个漂亮的边框。

对于圆形边缘，您可以使用borderRadius 属性。

Container(
          margin: EdgeInsets.symmetric(
            horizontal: 4.0,
            vertical: 8.0,
          ),
          padding: EdgeInsets.symmetric(
            horizontal: 8.0,
            vertical: 12.0,
          ),
          child: Text('A "card" with rounded edges and a border'),
          decoration: BoxDecoration(
            gradient: LinearGradient(
              stops: [0.015, 0.015],
              colors: [
                Colors.blue,
                Colors.white,
              ],
            ),
            borderRadius: BorderRadius.all(
              Radius.circular(5.0),
            ),
            boxShadow: [
              BoxShadow(
                color: Colors.grey,
                blurRadius: 4.0,
                offset: Offset(0.0, 1.5),
              ),
            ],
          ),
        )

Result from the code above

【讨论】：