颤振给容器圆形边界

我正在创建Container()，我给了它一个边框，但如果有圆形边框就更好了。

这是我现在拥有的:

Container(
width: screenWidth / 7,
decoration: BoxDecoration(
border: Border.all(
color: Colors.red[500],
),
),
child: Padding(
padding: EdgeInsets.all(5.0),
child: Column(
children: <Widget>[
Text(
'6',
style: TextStyle(
color: Colors.red[500],
fontSize: 25),
),
Text(
'sep',
style: TextStyle(
color: Colors.red[500]),
)
],
),
),
);

我试着把ClipRRect放在它上面，但是这样就把边界剪掉了。有解决办法吗?

285549 次浏览
小开
最佳答案

尝试使用BoxDecoration中的属性borderRadius

类似的

Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.red[500],
),
borderRadius: BorderRadius.all(Radius.circular(20))
),
child: ...
)
小开

增强上述答案。

Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.red[500],
),
borderRadius: BorderRadius.circular(20) // use instead of BorderRadius.all(Radius.circular(20))
),
child: ...
)
小开

要使它完全圆:

Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
),
)

在选定的点上画一个圆:

Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(40.0),
bottomRight: Radius.circular(40.0),
topLeft: Radius.circular(40.0),
bottomLeft: Radius.circular(40.0)),
),
child: Text("hello"),
),

或

  Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: ...
)
小开

你可以使用ClipRRect Widget:

ClipRRect (
borderRadius: BorderRadius.circular(5.0),
child: Container(
height: 25,
width: 40,
color: const Color(0xffF8742C),
child: Align(
alignment: Alignment.center,
child: Text("Withdraw"))),
)
小开 
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
border: Border.all(
color: HexColor('#C88A3D'),
width: 3.0
)
),
child: Container(
decoration: new BoxDecoration(borderRadius:
BorderRadius.circular(20.0),
color: Colors.white,),
)
),
小开

这里的关键是添加BorderRadius:

Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.red[340],
),
borderRadius: BorderRadius.all(Radius.circular(35),
),
child: `enter code here`
),
小开

只要把这个放在容器

Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(30))
),
)
小开

要制作一个完整的圆，只需使用shape属性:

Container(
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.black,
),
child: Icon(
Icons.add,
size: 15.0,
color: Colors.white,
),

Here is picture

小开

你可以这样用。如果你想要边界的所有角落，你可以使用波纹管。

Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(12.0),
),
),
),

如果你想为选定的边设置圆角边框，你可以像下面这样使用。

Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
),
),
child: Text('Text'),
),
小开

这是做同样事情的另一种方法。

当需要在容器周围使用InkWell时可能有用。

Material(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
child: Container(
height: 100,
width: 150,
),
);
小开
只要在BoxDecoration中使用圆形shape: BoxShape.circle即可。 所有代码都像

Container(
decoration: BoxDecoration(
shape: BoxShape.circle
),
)
小开 
SizedBox(
child: (Container(
decoration: BoxDecoration(
color: Colors.grey,
border: Border.all(
color: Colors.grey,
),
borderRadius:
BorderRadius.all(Radius.circular(20))),
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Text('00'),


Padding(
padding: const EdgeInsets.fromLTRB(
2.0, 0, 0, 0),
child: Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: CustomText(
"2",
color: Colors.black,
),
),
), // text
],
),
],
),
)),
width: 60,
),

提交答案