在 Flutter 中使用 borderRadius 为容器添加边框

Question

Container(
      child: Text(
          'This is a Container',
          textScaleFactor: 2,
          style: TextStyle(color: Colors.black),
      ),

      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Colors.white,
          border: Border(
              left: BorderSide(
                  color: Colors.green,
                  width: 3,
              ),
            ),
          ),
      height: 50,
     ),

这应该显示一个圆形边缘的容器，带有 3px 宽的绿色左边框，以及子文本“这是一个容器”。然而，它只是显示了一个圆边容器，带有一个不可见的子元素和一个不可见的左边框。

当我取出borderRadius对象时，子Text和绿色左边框可见，但引入它再次隐藏了左边框和子Text。

主要问题似乎是自定义左边框，因为使用border: Border.all(width: 0)和borderRadius: BorderRadius.circular(10)使边缘根据需要变圆并显示孩子。但是现在我无法应用在这个特定设置中非常重要的绿色左边框。

那么我做错了什么，或者这是颤振中的错误，还是只是不允许的事情？

先感谢您。

编辑：下图是最终结果。颜色不重要

Answer 1

不可能同时添加 border: 和 borderRadius: ，你会得到这个错误：

只能为统一边界提供 borderRadius。

您可以使用 borderRadius: 和 boxShadow: 而不是 border: 来实现您想要的效果，如下所示：

boxShadow: [
  BoxShadow(color: Colors.green, spreadRadius: 3)
]

您的示例代码如下所示：

Container(
  child: Text(
    'This is a Container',
    textScaleFactor: 2,
    style: TextStyle(color: Colors.black),
  ),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.white,
    boxShadow: [
      BoxShadow(color: Colors.green, spreadRadius: 3),
    ],
  ),
  height: 50,
),

编辑：要实现您现在提供的示例，您可以执行以下操作：

Container(
  padding: EdgeInsets.only(left: 12.0),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10.0),
    color: Colors.green,
  ),
  height: 50,
  child: Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.only(
          topRight: Radius.circular(10.0),
          bottomRight: Radius.circular(10.0)),
      color: Colors.white,
    ),
    child: Text(
      'This is a Container',
      textScaleFactor: 2,
      style: TextStyle(color: Colors.black),
    ),
  ),
),

另一种解决方案：

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10.0),
    color: Colors.white,
  ),
  height: 50,
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Container(
        width: 12.0,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10.0),
              bottomLeft: Radius.circular(10.0)),
          color: Colors.green,
        ),
      ),
      Text(
        'This is a Container',
        textScaleFactor: 2,
        style: TextStyle(color: Colors.black),
      )
    ],
  ),
),

Answer 2

这可能已经很晚了，但也可能对其他人有用。

您可以将您的内容包裹Container在 a 内部ClipRRect，为 ClipRRect 指定半径，并为 Container 指定边框！

例子：

ClipRRect(
   borderRadius: const BorderRadius.all(Radius.circular(16.0)),
   child: Container(
     height: 100,
     width: double.maxFinite,
     padding: const EdgeInsets.all(16.0),
     decoration: BoxDecoration(
       border: Border(
         left: BorderSide(width: 8.0, color: Colors.green),
       ),
     ),
   ),
 ),

这应该会完成您最后发布的用户界面。

Answer 3

这里有一个答案

Container(
            decoration: BoxDecoration(
                border: Border.all(
                    color: Color(0xFFF05A22),
                    style: BorderStyle.solid,
                    width: 1.0,
                ),
                color: Colors.transparent,
                borderRadius: BorderRadius.circular(30.0),
            ),
),

Answer 4

有几种方法可以为 Flutter 小部件添加边框。最基本的方法是将您的小部件包装在DecoratedBox. 但是，该Container小部件也有一个DecoratedBox内置的。

对于上面的输出，使用 aStack而不是Row因为Stack允许我们使多个小部件相互重叠，您可以使用Align或Positioned小部件对齐或定位您的小部件。

 Container(
  height: 65,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.deepPurple.shade100,
  ),
  child: Stack(
    children: <Widget>[
      Container(
        width: 8,

        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(15),
              bottomLeft: Radius.circular(15)),
          color: Colors.deepPurple,
        ),
      )
    ],
  ),
)