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

Ana*_*man 4 layout border widget flutter flutter-layout

        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,
                    )
                  ],
                ),
              ),
Run Code Online (Sandbox Code Playgroud)

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

小智 5

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

     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,
                    )),
              )
            ],
          ),
        ),
Run Code Online (Sandbox Code Playgroud)