颤振给容器圆形边界

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

当前回答

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

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

2022-07-18 11:06:21

其他回答

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

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

尝试使用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

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,
                          ),

2022-10-26 07:17:10

增强上述答案。

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

要制作一个完整的圆，只需使用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,
     ),

2021-06-04 10:25:15

颤振给容器圆形边界

推荐文章

最新文章

标签