我在创建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放在上面,但那把边界剪掉了。有解决办法吗?


当前回答

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

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

Material(
 shape: RoundedRectangleBorder(
   borderRadius: BorderRadius.circular(8),
 ),
 child: Container(
   height: 100,
   width: 150,
 ),
);

其他回答

只需简单地使用圆形形状:BoxShape。圆圈在BoxDecoration。 所有的代码都像这样

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

你可以使用ClipRRect小部件:

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.all(Radius.circular(30))
  ),
)

尝试使用BoxDecoration中的属性borderRadius

类似的

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.red[500],
    ),
    borderRadius: BorderRadius.all(Radius.circular(20))
  ),
  child: ...
)
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,),
    )
  ),