颤动给容器圆形边框

Question

我正在制作容器，我给了它一个边框，但我会很高兴有圆形边框。

这就是我现在所拥有的

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 ，但它把边界剪掉了。有解决方案吗？提前致谢！！！

Answer 1

尝试使用borderRadius来自BoxDecoration

就像是

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

Answer 2

它可以通过多种方式完成。

• 如果你有一个简单的圆角来实现使用ClipRRect， ClipOval
• 如果您想对圆角有更多的控制，请 BoxDecoration在Container

剪辑R矩形

 ClipRRect(
    borderRadius: BorderRadius.circular(20),
    child: Container(height: 100, width: 100, color: Colors.orange)),

椭圆形夹子

ClipOval(
    child: Container(height: 100, width: 100, color: Colors.orange)),

盒子装饰

• 边界遍布各个角落

 Container(
   decoration: BoxDecoration(
   borderRadius: BorderRadius.circular(10),
   color: Colors.orange),
   height: 100,
   width: 100,
 );

• 边界在特定的角落

 Container(
    decoration: const BoxDecoration(
      borderRadius: BorderRadius.only(
       topLeft: Radius.circular(40),
       bottomRight: Radius.circular(40)),
      color: Colors.orange),
    height: 100,
    width: 100,
 ),

• 特定轴上的边界

  Container(
    decoration: const BoxDecoration(
      borderRadius: BorderRadius.horizontal(
        right: Radius.circular(60),
        ),
      color: Colors.orange),
    height: 100,
    width: 100,
  );

Answer 3

要使其完全圆：

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

Answer 4

你可以像这样使用。如果你想要所有角的边框，你可以像下面这样使用。

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

Answer 5

您可以使用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"))),
          )

Answer 6

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

Answer 7

对上述答案的增强。

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

Answer 8

容器（
    装饰：BoxDecoration(
      borderRadius: BorderRadius.circular(20.0),
      边框：边框.all(
        颜色：HexColor('#C88A3D'),
        宽度：3.0
      ）
    ),
    子项：容器（
      装饰： new BoxDecoration(borderRadius:
      BorderRadius.circular(20.0),
      颜色: 颜色.白色,),
    ）
  ),