在 Flutter 中使用borderRadius为容器添加边框 [英] Add border to a Container with borderRadius in Flutter

问题描述

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 supposed to show a rounded-edged container with a green left border 3px wide, and the child Text "This is a Container". However, it just shows a rounded-edged container with an invisible child and an invisible left border.

当我取出borderRadius对象时，子Text和绿色左边框是可见的，但是引入它又隐藏了左边框和子Text.

When I take out the borderRadius object, the child Text and the green left border is visible, but introducing it hides the left border and child Text again.

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

The major problem seems to be the custom left border, because using border: Border.all(width: 0) and borderRadius: BorderRadius.circular(10) makes the edges rounded as needed and also shows the child. But now I cant apply the green left border which is quite important in this particular setup.

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

So is there something I'm doing wrong, or is this a bug in flutter, or is it just something that is not allowed?

提前谢谢你.

下图是最终结果.颜色无所谓

The image below is the end result. The colors don't matter

推荐答案

不能同时添加border: 和borderRadius: 会报这个错误:

It's not possible to add border: and borderRadius: at the same time, you'll get this error:

borderRadius 只能用于统一边框.

A borderRadius can only be given for uniform borders.

您可以使用borderRadius:和boxShadow:而不是border:来实现您想要的效果:像这样:

You can achieve what you want using the borderRadius: and a boxShadow: instead of border: like this:

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

您的示例代码如下所示:

Your sample code would be like this:

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

<小时>

要实现您现在提供的示例，您可以这样做:

---

To achieve the example you now provided, you could do this:

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 中使用borderRadius为容器添加边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！