Question

我正在尝试使用Flutter中的Container小部件构建一侧圆形边框。我已经搜索了，但是找不到任何解决方案。

Container(
  width: 150.0,
  padding: const EdgeInsets.all(20.0),
  decoration: BoxDecoration(
    // borderRadius: BorderRadius.circular(30.0),
    /* border: Border(
      left: BorderSide()
    ),*/
  color: Colors.white
  ),
  child: Text("hello"),
),

Answer 1

另一种方法是使用 ClipRRect 小部件。只需用 ClipRRect 包裹您的小部件并给出一个半径。 您可以指定要使哪个角变圆。

ClipRRect(
      borderRadius: BorderRadius.only(topRight: Radius.circular(10)),
      child: Container(
        height: 40,
        width: 40,
        color: Colors.amber,
        child: Text('Hello World!'),
      ),
    );

Answer 2

也可以做如下，

 borderRadius: new BorderRadius.only(
     topLeft: const Radius.circular(30.0),
     bottomLeft: const Radius.circular(30.0),
 ),

Answer 3

使用BorderRadius.only并提供侧面

 Center(
    child: Container(
      height: 100,
      width: 100,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(topRight:  Radius.circular(40)),
        border: Border.all(width: 3,color: Colors.green,style: BorderStyle.solid)
      ),
      child: Center(child: Text("Hello")),
    ),
  ),

输出

Answer 4

您可以通过以下代码来创建窗口小部件来实现此目的：

Container(      
                width: 150.0,
                padding: const EdgeInsets.all(20.0),
                decoration: BoxDecoration(
                  shape: BoxShape.rectangle,
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(20.0),
                    topRight: Radius.zero,
                    bottomLeft: Radius.zero,
                    bottomRight: Radius.zero,
                  ),
                ),
                child: Text(
                  Text("hello"),
                ),
              ),

通过这种方式，您可以使自己的左上角圆形边框与“容器”窗口小部件变得混乱。

Answer 5

如果要使容器的一侧变圆，则要使用BorderRadius.only并指定要变圆的角，如下所示：

Container(
          width: 150.0,
          padding: const EdgeInsets.all(20.0),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                  topRight: Radius.circular(40.0),
                  bottomRight: Radius.circular(40.0)),
              color: Colors.white),
          child: Text("hello"),
        ),

如何用小部件使小部件的一侧圆形边界？

5 个答案: