Как я могу исправить контейнеры в Flutter? - PullRequest
Новая
       22

Как я могу исправить контейнеры в Flutter?

0 голосов
/ 09 января 2020

Я хочу, чтобы первый контейнер был зафиксирован в центре, а второй - справа, но я не смог. Я добавляю mainAxisAlignment: MainAxisAlignment.spaceBetween в строке, но это не сработало. Существуют ли разные свойства для настройки положения виджетов?

Мой код: 

new Container(
  width: 360,
  height: 502,
  decoration: new BoxDecoration(
    gradient: LinearGradient(
      colors: [
        Color(0xffffffff),
        Color(0x00caebfe) 
      ],
      stops: [0,1]
    )
  ),
  child:Column(
    //crossAxisAlignment: CrossAxisAlignment.start,
    children:<Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            alignment: Alignment.center,
            child: Text("JULY 2017",
              style: TextStyle(
                fontFamily: 'Baloo',
                color: Color(0xff181743),
                fontSize: 20,
                fontWeight: FontWeight.w400,
                fontStyle: FontStyle.normal,
              )
            )
          ),
          Container(
            alignment: Alignment.centerLeft,
            //padding: EdgeInsets.only(left:90.0),
            child: Column(
              children: <Widget>[
                new Container(
                width: 14,
                height: 5,
                decoration: new BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  gradient: LinearGradient(
                    colors: [
                      Color(0xfffe1e9a),
                      Color(0xfffea64c) 
                    ],
                    stops: [0,1]
                  ),
                )
              ),
              new Container(
                //margin: EdgeInsets.only(top:3.0),
                width: 23,
                height: 5,
                decoration: new BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  gradient: LinearGradient(
                    colors: [
                      Color(0xfffe1e9a),
                      Color(0xfffea64c) 
                    ],
                    stops: [0,1]
                  )
                )
              )
          ],)
          )
        ]
      )
    ]
  )
),

Существуют ли разные свойства для настройки положения виджетов?

Ответы [ 3 ]

0 голосов
/ 09 января 2020

Следуя тому, что вы сказали, что хотели достичь, так как текст располагался по центру, а градиенты были направлены вправо, я изменил ваш код, добавив виджет Expanded вокруг первого Container в Row и убирая ширину вашего верха Container: 

Container(
  height: 502,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [
        Color(0xffffffff),
        Color(0x00caebfe)
      ],
      stops: [0,1]
    )
  ),
  child: Column(
    children:<Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Expanded(
            child: Center(
              child: Text("JULY 2017",
                style: TextStyle(
                  fontFamily: 'Baloo',
                  color: Color(0xff181743),
                  fontSize: 20,
                  fontWeight: FontWeight.w400,
                  fontStyle: FontStyle.normal,
                )
              ),
            ),
          ),
          Column(
            children: <Widget>[
              new Container(
                width: 14,
                height: 5,
                decoration: new BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  gradient: LinearGradient(
                    colors: [
                      Color(0xfffe1e9a),
                      Color(0xfffea64c)
                    ],
                    stops: [0,1]
                  ),
                )
              ),
              new Container(
                //margin: EdgeInsets.only(top:3.0),
                width: 23,
                height: 5,
                decoration: new BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  gradient: LinearGradient(
                    colors: [
                      Color(0xfffe1e9a),
                      Color(0xfffea64c)
                    ],
                    stops: [0,1]
                  )
                )
              )
            ],)
        ]
      )
    ]
  )
),
0 голосов
/ 09 января 2020 
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Scaffold(
          body: new Container(
              width: 360,
              height: 502,
              decoration: new BoxDecoration(
                  gradient: LinearGradient(
                      colors: [Color(0xffffffff), Color(0x00caebfe)],
                      stops: [0, 1])),
              child: Stack(
                  children: <Widget>[
                    Positioned(
                      right: 0,
                      child: Container(
                          alignment: Alignment.center,
                          child: Text("JULY 2017",
                              style: TextStyle(
                                fontFamily: 'Baloo',
                                color: Color(0xff181743),
                                fontSize: 20,
                                fontWeight: FontWeight.w400,
                                fontStyle: FontStyle.normal,
                              ))),
                    ),
                    Align(
                        alignment: Alignment.center,
                        child: Container(
                            child: Column(
                          children: <Widget>[
                            new Container(
                                width: 14,
                                height: 5,
                                decoration: new BoxDecoration(
                                    borderRadius: BorderRadius.circular(10),
                                    gradient: LinearGradient(colors: [
                                      Color(0xfffe1e9a),
                                      Color(0xfffea64c)
                                    ], stops: [
                                      0,
                                      1
                                    ]))),
                            new Container(
                                //margin: EdgeInsets.only(top:3.0),
                                width: 23,
                                height: 5,
                                decoration: new BoxDecoration(
                                    borderRadius: BorderRadius.circular(10),
                                    gradient: LinearGradient(colors: [
                                      Color(0xfffe1e9a),
                                      Color(0xfffea64c)
                                    ], stops: [
                                      0,
                                      1
                                    ])))
                          ],
                        ))),
                  ])),
        ),
      ),
    );
  }

Проверьте этот метод, используя стек, он упрощает, позже вы можете позже изменить спасибо.

0 голосов
/ 09 января 2020

Пытаетесь ли вы разместить FirstContainer в самом центре, а SecondContainer в самом конце?

Если это так, вы можете использовать Row и Expanded

Таким образом, это будет примерно так: 

Row(
    mainAxisSize: MainAxisSize.max,
    children: [
        /// Just a placeholder container to occupy 1/3 of the Row
        Expanded(child: Container()),
        Expanded(child: FirstContainer()),
        Expanded(child: SecondContainer()),
    ]
)

Для этого нужно добавить контейнер-заполнитель, который занимает 1/3 строки, и ваш FirstContainer будет вынужден быть в центре и SecondContainer разделе строки.

...