如何绘制只在顶部有边框的圆角矩形

Question

绘制圆角矩形有多种方法。我想画一个里面有内容的圆形矩形。但是，只有矩形的顶部应该是圆形的。

我试过

Container(
decoration:
BoxDecoration(border: Border(top: BorderSide(color: Colors.red))),
child: Column(
children: [Text("hello")],
));

但我得到了一条红线；你好"；底部。毫无意义。

Answer 1

使用BorderRadius.vertical，您可以选择上角或下角。

decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(20),
),
),

使用BorderRadius，只有您可以选择任何角落。

decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),

Answer 2

这是的一个小技巧

Container(
height: 100,
width: 150,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(
const Radius.circular(15.0),
),
),
child: Container(
margin: const EdgeInsetsDirectional.only(top: 2),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(13.0),
topRight: const Radius.circular(13.0),
),
),
child: Column(
children: [
Text("hello"),
],
) 
),
)

Answer 3

试试这个

Container(
decoration: ShapeDecoration(
color: Colors.yourColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16.0),
topRight: Radius.circular(16.0),
),
),
),
),