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

Question

        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 decoration添加边框，但是当我尝试在内部容器上做同样的事情时，它会出现错误。问题在哪里，如何解决？

- Anant Raman

---

请提及您所遇到的错误。 - graphicstone

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

- Aman Raj Srivastava

---

所需答案：我们不应该直接在容器中添加颜色属性，它应该只在装饰中使用。 - Anant Raman

正确的颜色是装饰物品的属性，而不是容器的属性。 - sud007

容器的颜色参数用于设置盒子装饰的颜色值，如果为空，则容器的颜色参数只是装饰颜色的简写。 - Aman Raj Srivastava

Answer 2

在容器小部件中，无法同时使用颜色和装饰。请从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
      )
    ],
  ),
),

- Manuel

Answer 3

考虑使用简单的Divider小部件来保持简洁。如果您将其添加到行中Column的底部，它将添加一条线作为边框。

const Divider(height: 1.0,),

- orgreeno