Как убрать пробел между строками в карточке (Flutter)

#flutter #flutter-layout

#трепетание #флаттер-макет

Вопрос:

Я использовал виджет card в своем приложении flutter, который имеет две строки, проблема, с которой я столкнулся, заключается в появлении большого пробела между двумя строками, как вы можете видеть на следующем изображении

как можно решить эту проблему?

мой код, который я попробовал здесь :

 return Card(

                      child: Container(
                        alignment: FractionalOffset.center,
                        child: Row(
                          children: <Widget>[
                            Expanded(
                              flex: 1,
                              child: Container(
                                child: ListTile(

                                  title: Text(snapshot.data[index].data["title"],
                                    textDirection: TextDirection.rtl,
                                    style: TextStyle(fontSize: 14.0,
                                        fontFamily: 'Cairo',
                                        fontWeight: FontWeight.bold),),
                                  onTap: () => navigateToDetails(snapshot.data[index]),

                                ),
                              ),
                            ),
                            //SizedBox(width: 1.0),
                            Expanded(
                              flex: 1,
                              child: Container(child: Image.network(snapshot.data[index].data["image_url"],height: 80.0,width: 80.0)),
                            ),


                          ],
                        ),
                      ),
                    );

Ответ №1:

добавьте MainAxisAlignment : MainAxisAlignment.center свойство в свой Row виджет

следующий код должен сработать для вас, проверьте это.

   return Card(
    child: Container(
      alignment: FractionalOffset.center,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
            flex: 1,
            child: Container(
              child: ListTile(
                title: Text(
                  snapshot.data[index].data["title"],
                  textDirection: TextDirection.rtl,
                  style: TextStyle(
                      fontSize: 14.0,
                      fontFamily: 'Cairo',
                      fontWeight: FontWeight.bold),
                ),
                onTap: () => navigateToDetails(snapshot.data[index]),
              ),
            ),
          ),
          //SizedBox(width: 1.0),
          Expanded(
            flex: 1,
            child: Container(
                child: Image.network(snapshot.data[index].data["image_url"],
                    height: 80.0, width: 80.0)),
          ),
        ],
      ),
    ),
  );

Ответ №2:

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

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

вы можете использовать такие значения, как:

Выравнивание главной оси.расстояние между и выравниванием главной оси.равномерно