如何在 Flutter 中的行小部件内的容器上添加边框?

Posted

技术标签:

【中文标题】如何在 Flutter 中的行小部件内的容器上添加边框?【英文标题】:How to add border on a container inside a row widget in Flutter? 【发布时间】:2020-07-04 21:38:54 【问题描述】:
        Container(
    //            decoration: BoxDecoration(
    //              border: Border.all(color: Colors.black45),
    //              borderRadius: BorderRadius.circular(8.0),
    //            ),
                child: Row(
                  children: <Widget>[
                    Container(
                      child: Text("hi"),
                      margin : EdgeInsets.fromLTRB(20, 8, 8, 16),
                      width: MediaQuery.of(context).size.width *0.42,
                      height: 90,
                      color: Colors.black12,
                    ),

                    Container(
                      child: Text("Hi"),
                      margin: EdgeInsets.fromLTRB(16, 8, 8, 16),
                      width: MediaQuery.of(context).size.width * 0.42 ,
                      height: 90,
                      color: Colors.black12,
                    )
                  ],
                ),
              ),

我可以在外部容器上使用 Box 装饰添加边框,但是当我尝试在内部容器上执行相同操作时它会引发错误。是什么问题以及如何解决?

【问题讨论】:

请提及您遇到的错误 【参考方案1】:

为了在行小部件内的容器上添加边框,我们必须对内部容器使用装饰。 一旦您发布错误,我们可以更好地回答您,但我认为以下代码将对您有所帮助。 如果你使用装饰,那么你不能直接在容器中添加颜色属性,它应该只在装饰中。

     Container(
          child: Row(
            children: <Widget>[
              Container(
                child: Text("hi"),
                margin: EdgeInsets.fromLTRB(20, 8, 8, 16),
                width: MediaQuery.of(context).size.width * 0.42,
                height: 90,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(4)),
                    shape: BoxShape.rectangle,
                    border: Border.all(
                      color: Colors.blue,
                      width: 4,
                    )),
              ),
              Container(
                child: Text("Hi"),
                margin: EdgeInsets.fromLTRB(16, 8, 8, 16),
                width: MediaQuery.of(context).size.width * 0.42,
                height: 90,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(4)),
                    shape: BoxShape.rectangle,
                    border: Border.all(
                      color: Colors.blue,
                      width: 4,
                    )),
              )
            ],
          ),
        ),

【讨论】:

必填答案:我们不能直接在容器中添加颜色属性,它应该只是装饰。 正确的颜色是装饰物品的属性,不是tge容器的属性。 容器的颜色参数用于设置盒子装饰中的颜色值,如果它为空,容器的颜色参数只是装饰颜色的简写【参考方案2】:

在容器小部件中,您不能同时使用colordecoration。从Container 中删除color 属性并将其移动到BoxDecoration 小部件中

这应该可行:

Container(
  child: Row(
    children: <Widget>[
      Container(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.black45),
          borderRadius: BorderRadius.circular(8.0),
          color: Colors.black12,  //add it here
        ),
        child: Text("hi"),
        margin : EdgeInsets.fromLTRB(20, 8, 8, 16),
        width: MediaQuery.of(context).size.width *0.42,
        height: 90,
        //color: Colors.black12,    //must be removed
      ),

      Container(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.black45),
          borderRadius: BorderRadius.circular(8.0),
          color: Colors.black12,  //add it here
        ),
        child: Text("Hi"),
        margin: EdgeInsets.fromLTRB(16, 8, 8, 16),
        width: MediaQuery.of(context).size.width * 0.42 ,
        height: 90,
        //color: Colors.black12,      // must be removed
      )
    ],
  ),
),

【讨论】:

以上是关于如何在 Flutter 中的行小部件内的容器上添加边框?的主要内容,如果未能解决你的问题,请参考以下文章

Flutter - 如何在图像下方使用带有图像和文本/图标的容器小部件

Flutter - 如何在一行中显示文本和图标?

用列/行小部件包装小部件后屏幕消失

如何在颤动的行之间写 OR

Flutter 中的索引堆叠。如何在所有其他小部件之上显示容器?

Flutter中如何改变Widget在Column或Row中的显示顺序