颤振给容器圆形边界

我在创建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,
 ),
);

2022-04-19 14:33:08

其他回答

尝试使用BoxDecoration中的属性borderRadius

类似的

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

2019-09-03 20:43:30

增强上述答案。

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

2020-08-09 17:15:37

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

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

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

2022-04-19 14:33:08

要使它完全圆:

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: ...
    )

2020-08-11 10:01:28

这里的关键是添加一个边界半径:

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

2021-02-10 09:37:37

颤振给容器圆形边界

推荐文章

最新文章

标签