Как добавить рамку на контейнер внутри виджета строки в Flutter? - PullRequest
Новая
       20

Как добавить рамку на контейнер внутри виджета строки в Flutter?

3 голосов
/ 24 марта 2020 
        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 на внешнем контейнере, но это выдает ошибку, когда я пытаюсь сделать то же самое для внутренних контейнеров. В чем проблема и как ее решить?

Ответы [ 2 ]

4 голосов
/ 24 марта 2020

Чтобы добавить рамку на контейнер внутри виджета строки, мы должны использовать оформление для внутренних контейнеров. Как только вы опубликуете ошибку, мы можем ответить вам лучше, но я думаю, что приведенный ниже код будет вам полезен. Если вы используете украшение, то вы не должны добавлять цветовой атрибут непосредственно в контейнер, он должен быть только в украшении. 

     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,
                    )),
              )
            ],
          ),
        ),
1 голос
/ 24 марта 2020

В контейнерных виджетах нельзя использовать color и decoration одновременно. Удалите свойство color из Container и переместите его в виджет 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
      )
    ],
  ),
),
...