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

时间:2019-10-12 02:01:19

标签: flutter flutter-layout

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对象时,可以看到子Text和绿色的左边框,但是引入它会再次隐藏左边框和子Text。

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

那么我在做错什么吗,或者这是扑朔迷离的错误,还是仅仅是不允许的事情?

谢谢。

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

This is how it should look

6 个答案:

答案 0 :(得分:3)

有几种向Flutter小部件添加边框的方法。最基本的方法是将小部件包装在DecoratedBox中。但是,Container小部件还内置有DecoratedBox

对于以上输出,请使用Stack而不是Row,因为Stack允许我们使多个小部件相互重叠,并且您可以使用{{1 }}或Align小部件。

Positioned

enter image description here

答案 1 :(得分:2)

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

答案 2 :(得分:1)

这可能太晚了,但也可能对其他人有用。

您可以将获取的 Container 包裹在 ClipRRect 中,为 ClipRRect 指定半径并为 Container 指定边框!

示例:

androidx.constraintlayout.helper.widget.Flow

这应该是你上次发布的用户界面。

答案 3 :(得分:0)

我认为,受@pablo的回答启发,一种更简单的方法是只制作具有和偏移但没有任何模糊的boxShadow。

decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(10),
        ),
        boxShadow: [
          // to make elevation
          BoxShadow(
            color: Colors.black45,
            offset: Offset(2, 2),
            blurRadius: 4,
          ),
          // to make the coloured border
          BoxShadow(
            color: Colors.blue,
            offset: Offset(0, 4),
          ),
        ],
      ),

上面的装饰将使我们得到一个高架的盒子,盒子的底部带有蓝色边框。 这种方法的另一个好处是您可以将它与

一起使用

borderRadius: BorderRadius.circular(num)

这意味着您可以拥有一个带有所有圆角边和彩色边框的容器。

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

答案 4 :(得分:0)

有一个答案here

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

答案 5 :(得分:0)

如果您想实现 borderRadius,您也可以使用 PhysicalModel,但您必须提供颜色。您还可以为小部件设置阴影。

PhysicalModel(
  color: Colors.red,
  elevation: 5,
  shadowColor: Colors.blue,
  borderRadius: BorderRadius.circular(20),
  child: SizedBox(width: 75, height: 75),
)