Flutter 将边框添加到“颤振”中具有边框半径的容器

这应该显示一个圆形边缘的容器，左边框为绿色，宽3倍，子文本为“This is a container”。但是，它只显示了一个带有不可见子对象和不可见左边框的圆边容器

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

主要问题似乎是自定义左边框，因为使用

border:border.all（width:0）

和

borderRadius:borderRadius.circular（10）

会根据需要使边变圆，并显示子对象。但是现在我不能应用绿色的左边框，这在这个特殊的设置中非常重要

那么，是不是有什么我做错了，或者这是颤振中的一个错误，或者只是一些不允许的事情

先谢谢你

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

---

无法同时添加边框：和边框半径：时，会出现以下错误：

只能为统一边界指定边界半径

您可以使用borderRadius:和boxShadow:而不是border:实现所需的功能，如下所示：

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

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,
          border: Border(
              left: BorderSide(
                  color: Colors.green,
                  width: 3,
              ),
            ),
          ),
      height: 50,
     ),

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

容器(
装饰：盒子装饰(
边界半径：边界半径。圆形（10.0），
颜色：颜色，白色，
),
身高：50，
孩子：排(
mainAxisSize:mainAxisSize.min，
儿童：[
容器(
宽度：12.0，
装饰：盒子装饰(
borderRadius：仅限borderRadius(
左上：半径。圆形（10.0），
左下角：半径。圆形（10.0）），
颜色：颜色。绿色，
),
),
正文(
“这是一个容器”，
textScaleFactor:2，
样式：TextStyle（颜色：Colors.black），
)
],
),
),

我认为受@pablo答案启发的一个更简单的方法是只制作一个带有和偏移量但没有任何模糊的盒影

装饰：盒子装饰(
颜色：颜色，白色，
borderRadius:borderRadius.vertical(
顶部：半径。圆形（10），
),
boxShadow：[
//抬高
箱形阴影(
颜色：颜色。黑色45，
偏移量：偏移量（2,2），
半径：4，
),
//制作彩色边框
箱形阴影(
颜色：颜色，蓝色，
偏移量：偏移量（0,4），
),
],
),

上面的装饰将为我们提供一个底部有蓝色边框的高架箱子。 这种方法的另一个好处是，您可以将其与

borderRadius:borderRadius.circular（num）

这意味着您可以拥有一个具有所有圆形边+彩色边框的容器

---

请注意，彩色边框位于原始阴影下。这样做是为了防止立面颜色使边框变暗。

有几种方法可以将边框添加到颤振小部件。最基本的方法是将小部件包装在

装饰框中。但是，
容器
小部件还内置了一个
装饰框

对于上述输出，使用
堆栈
而不是
行
，因为
堆栈
允许我们使多个小部件相互重叠，并且您可以使用
对齐
或
定位
小部件对齐或定位小部件

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

容器(
身高：65，
装饰：盒子装饰(
边界半径：边界半径。圆形（10），
颜色：Colors.deepPurple.shade100，
),
子：堆栈(
儿童：[
容器(
宽度：8，
装饰：盒子装饰(
borderRadius：仅限borderRadius(
左上：半径。圆形（15），
左下角：半径。圆形（15）），
颜色：颜色。深紫色，
),
)
],
),
)

有一个答案

如果要实现
边界半径
，也可以使用
物理模型
，但必须提供颜色。您还可以为小部件设置阴影

物理模型(
颜色：颜色，红色，
标高：5，
阴影颜色：颜色。蓝色，
边界半径：边界半径。圆形（20），
子项：大小框（宽度：75，高度：75），
)
这可能太晚了，但也可能对其他人有用

您可以将获取的容器包装在ClipRect中，为ClipRect指定半径并为容器指定边界

例如：

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

这将完成您最后发布的UI。
实际上，您可以添加border:和borderRadius。边界的类型可能是一个问题。我用我想要达到的目标的图像编辑了这个问题。谢谢你的努力