Я хотел бы знать, как я могу выровнять 3 разных контейнера внутри ряда, чтобы 2 из них оставались слева, а 1 - справа.

Как это: http://prntscr.com/tovlhw.

То, что я сделал, работает только для этого AVD, поскольку он использует пиксели для определения положения.


 
            GestureDetector(
            onTap: (){
              Navigator.push(context, MaterialPageRoute(builder: (context) => Favoritos()));
    },
                child: Row(
                   mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                         Container(
                            padding: EdgeInsets.fromLTRB(10,16,0,16),
                             color: Colors.white,
                                  child: Icon(Icons.favorite),
                                                                       ),

                           Container(
                              padding: EdgeInsets.fromLTRB(5,20,140,20),
                              color: Colors.white,
                                   child: Text('Favoritos'),
                                                                        ),

                           Container(
                              padding: EdgeInsets.fromLTRB(145,16,5,16),
                                color: Colors.white,
                                      child: Icon(Icons.keyboard_arrow_right),
                                                                        ),


    ],
    ),
    ),


1
Enzo Saoud 26 Июл 2020 в 22:03

5 ответов

Лучший ответ

Это легко сделать с помощью виджета ListTile с виджетом Card (если вам также нужен цвет фона):

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.white,
      child: ListTile(
        title: Text(
          'Favourite',
          style: TextStyle(color: Colors.black),
        ),
        leading: Icon(Icons.favorite, color: Colors.black),
        trailing: Icon(Icons.arrow_right, color: Colors.black),
      ),
    );
  }
}

Результат введите описание изображения здесь

Если вы хотите использовать подход Row, используйте Spacer следующим образом: также имейте в виду, что вы можете использовать свойство Container height, чтобы увеличить строку.

Container(
      color: Colors.white,
      child: Row(
        children: <Widget>[
          Icon(Icons.favorite, color: Colors.black),
          SizedBox(
            width: 10.0, // give the witdh you want between icon and text
          ),
          Text(
            'Favourite',
            style: TextStyle(color: Colors.black),
          ),
          Spacer(),
          Icon(Icons.arrow_right, color: Colors.black),
        ],
      ),
    );

Результат: введите описание изображения здесь

0
Hiwa Jalal 26 Июл 2020 в 19:23

Хи, я бы посоветовал вам обернуть класс Row внутри класса контейнера и задать максимальную высоту и ширину контейнера. Это даст строке полную прямоугольную область, а затем вы сможете выровнять дочерние элементы класса row, где захотите.

Container(
        height: MediaQuery.of(context).size.height,
        padding: EdgeInsets.all(16),
        child:  Column(
            children: [
              Padding(
                padding: EdgeInsets.only(top: MediaQuery.of(context).size.height*0.08),
              ),
              Container(
                alignment: Alignment.centerRight,
                child: RaisedButton(
                ),
              ),
              Container(
                  alignment: Alignment.centerLeft,
                  child: Text()
              ),
             Container(
                alignment: Alignment.centerRight,
                padding: EdgeInsets.only(top: 28),
                child: RaisedButton(
                  child: Text('Submit',style: TextStyle(color: Colors.white),),
                ),
              ),
            ],
          ),
          ),
0
Laxman Prajapati 27 Июл 2020 в 05:13

Используйте строку с mainAxisAlignment: MainAxisAlignment.spaceBetween, чтобы выровнять двух дочерних элементов равномерно слева и справа, при этом дочерние элементы будут:

1) Строка, содержащая 2 элемента, которые нужно разместить слева
2) контейнер, содержащий элемент, который нужно разместить справа

Проверьте, решает ли это вашу проблему

Это работает для любых целей, но ListTile - лучший вариант для вашего случая

0
A.J 26 Июл 2020 в 19:22

Решено с использованием:

                width: MediaQuery.of(context).size.width
0
Enzo Saoud 26 Июл 2020 в 23:05
Container(
height: 
width:MediaQurey.of(context).size.width,
child:ListTile(
leading:Icon(Icons.favorite),
  title: Text(
      'Favourite',
    ),
    trailing: Icon(Icons.arrow_right),


)
)
0
S.R Keshav 27 Июл 2020 в 04:09