Question

我正在制作容器，给它加了边框，但是如果边框很圆，我会很高兴。

这就是我现在拥有的（见图片）

https://drive.google.com/file/d/1AJ8ytjuUBCDX6mLBE3jmNyJdt7lTGBeW/view?usp=sharing

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

使其完全绕圈。

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 2

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

Answer 3

这里的关键是添加一个BorderRadius：

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

Answer 4

只要把它放在容器

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

Answer 5

尝试使用borderRadius中的属性BoxDecoration

类似

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

Answer 6

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

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

增强以上答案。

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

Answer 9

一种选择是将ShapeDecoration与RoundedRectangleBorder一起使用：

  Container(decoration: ShapeDecoration(shape: RoundedRectangleBorder())

颤振给容器圆形边框

9 个答案: