带右边框的圆角卡组件

我必须创建一个这样的卡:

enter image description here

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

上面的代码产生了这样的结果:

enter image description here

鉴于使用以下代码:

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

产生了这样的输出:

enter image description here

如何创建所需的用户界面？

81351 次浏览
小开

你应该把你的 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的值，因为它扭曲了小的圆形边界。

小开

我已经用 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))),
),
)

这给出了下面的输出, enter image description here

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

小开

使用 Card 小部件中的形状参数，例如:

Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: 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
)
)
小开

这个办法对我很有效。如果我们从卡中移除 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()),
),
)

enter image description here

小开

您可以使用 BoxDecoration上的 gradient属性，而不是使用 Card，也可以使用 Container 来实现这一点。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),
),
],
),
)

上述代码的结果

小开

您可以在 Card中使用 clipBehavior，并将 BorderSide 移动到 Container。

      Card(
clipBehavior: Clip.antiAlias,
child: Container(
height: 100,
decoration: BoxDecoration(
border: Border(
right: BorderSide(color: Colors.green, width: 5))),
),
)

提交答案