Блог

Я отображаю текст в ListView.Builder, и если часть текста слишком длинная, я использую свойство overflow: TextOverflow.ellipsis текстового виджета, чтобы убедиться, что это не вызывает ошибку переполнения. Ну, когда текст слишком длинный, он правильно использует TextOverflow, но он также сдвигает текст вправо. Я хочу, чтобы весь текст был выровнен. Может ли это быть вызвано TextOverflow или это проблема с макетом?

Это изображение одного из фрагментов текста, в котором использовалось многоточие из-за того, что оно слишком длинное. Как вы можете видеть, он смещен вправо. Это происходит только тогда, когда используется многоточие. Если текст не нуждается в многоточии, он не сдвигается вправо.

Это код, который отображает всю эту страницу. Бит, который я перемещаю вправо, — это место, где текст отображает пробег [индекс].trippurpose Я включил весь код, потому что это проблема с макетом, которую я продолжаю игнорировать.

 Container(
                          height: 60,
                          child: Row(
                            children: <Widget>[
                              Expanded(
                                flex: 1,
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Container(
                                      margin: EdgeInsets.only(left: 5, top: 13),
                                      child: Text(mileage[index].tripdate,
                                          style: TextStyle(
                                              fontSize: 14, color: Colors.black),
                                          textAlign: TextAlign.left),
                                    ),
                                  ],
                                ),),
                              Expanded(
                                flex: 3,
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Padding(
                                        padding: EdgeInsets.only(top: 13, left: 10),
                                        child: Text(mileage[index].trippurpose,
                                                style: TextStyle(
                                                    fontSize: 15,
                                                    fontWeight: FontWeight.bold,
                                                    color: Colors.black,
                                                    fontFamily: 'Montserrat'),
                                                overflow: TextOverflow.ellipsis,
                                                softWrap: true,
                                                textAlign: TextAlign.center),),

                                    Padding(
                                      padding: EdgeInsets.only(left: 10),
                                      child: Row(
                                        children: [Text(
                                          '${mileage[index].tripfrom} - ',
                                          overflow: TextOverflow.ellipsis,
                                          style: TextStyle(
                                              color: Colors.black,
                                              fontStyle: FontStyle.italic),
                                        ),
                                          Padding(
                                            padding: EdgeInsets.only(),
                                            child:Text(
                                              mileage[index].tripto,
                                              overflow: TextOverflow.ellipsis,
                                              softWrap: false,
                                              style: TextStyle(
                                                  color: Colors.black,
                                                  fontStyle: FontStyle.italic
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ],
                                ),),
                              Expanded(
                                flex: 1,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.end,
                                  children: [
                                    Padding(
                                      padding:
                                      EdgeInsets.only(top: 13, right: 10),
                                      child: Container(
                                        child: Text(
                                            mileage[index].triptotalmiles,
                                            style: TextStyle(
                                                fontSize: 16,
                                                color: Colors.black),
                                            textAlign: TextAlign.right),
                                      ),
                                    ),
                                  ],
                                ),)
                            ],
                          ))
  

Вот пример кода, который вы можете использовать для создания дизайна в соответствии с вашим кодом.

 Container(
        child: Row(
          children: [
            Flexible(
              flex: 1,
              child: Text(
                'THIS IS A TEST TEXT',
                overflow: TextOverflow.ellipsis,
              ),
            ),
            Flexible(
              flex: 3,
              fit: FlexFit.tight,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'THIS IS A TEST TEXT',
                    overflow: TextOverflow.ellipsis,
                  ),
                  Text(
                    'THIS IS A TEST TEXT',
                    overflow: TextOverflow.ellipsis,
                  ),
                ],
              ),
            ),
            Flexible(
              flex: 1,
              child: Text(
                'THIS IS A TEST TEXT',
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ],
        ),
      )
  

Примечание: — Вы применяете неправильную логику к своему коду. flex лучше всего подходит для гибкого виджета. Также проверьте FlexFit.tight.