flutter - 在Flutter中使用borderRadius将边框添加到容器

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宽)的圆角容器，以及子文本“This is a Container”。但是，它只显示了一个带有不可见子级和不可见左边框的圆角容器。

当我取出borderRadius对象时，子文本和绿色左边框是可见的，但是引入它会再次隐藏左边界和子文本。

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

那么，是我做错了什么，还是这是 flutter 朔迷离的错误，还是仅仅是不允许的事情？

先感谢您。

编辑:下图是最终结果。颜色没关系

最佳答案

不可能同时添加border:和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),
      )
    ],
  ),
),

关于flutter - 在Flutter中使用borderRadius将边框添加到容器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58350235/