Текст флаттера не является многоточием в списке - PullRequest
Новая
       14

Текст флаттера не является многоточием в списке

0 голосов
/ 01 июня 2019

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

Container(
          height: 72,
          constraints: BoxConstraints(minWidth: double.infinity),
          child: Row(
            children: <Widget>[
              Container(
                margin: const EdgeInsets.only(left: 16.0, right: 16.0),
                child: CircleAvatar(
                  radius: 20.0,
                  backgroundImage: NetworkImage(_model._organizerLogo),
                  backgroundColor: Colors.transparent,
                ),
              ),
              Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      padding: EdgeInsets.only(right: 8.0),
                      child: Text(
                        _model._eventName,
                        style: TextStyle(
                            fontSize: 15,
                            color: Colors.black,
                            fontWeight: FontWeight.w500),
                        textAlign: TextAlign.start,
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                    ...
                  ])
            ],
          ),
        )

Example

Упаковка Container в Flexible или Expandable не сработала.

Как сделать многогранный текстовый многоточие? Спасибо!

Ответы [ 2 ]

1 голос
/ 01 июня 2019

enter image description here

Вот рабочее решение: 

Container(
  height: 72,
  constraints: BoxConstraints(minWidth: double.infinity),
  child: Row(
    children: <Widget>[
      Container(
        margin: const EdgeInsets.only(left: 16.0, right: 16.0),
        child: CircleAvatar(
          radius: 20.0,
          backgroundImage: NetworkImage(poolImageUrl),
          backgroundColor: Colors.transparent,
        ),
      ),
      Expanded(
        child: Container(
          padding: EdgeInsets.only(right: 8.0),
          child: Text(
            "This will not overflow now, because we have put it in Expanded, you can try any long string here for test",
            style: TextStyle(fontSize: 15, color: Colors.black, fontWeight: FontWeight.w500),
            textAlign: TextAlign.start,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ),
    ],
  ),
),
1 голос
/ 01 июня 2019

Добавьте Expanded к вашему Column, чтобы придать ему фиксированную ширину на основе оставшегося пространства. 

Container(
      height: 72,
      constraints: BoxConstraints(minWidth: double.infinity),
      child: Row(
        children: <Widget>[
          Container(
            margin: const EdgeInsets.only(left: 16.0, right: 16.0),
            child: CircleAvatar(
              radius: 20.0,
              backgroundImage: NetworkImage(_model._organizerLogo),
              backgroundColor: Colors.transparent,
            ),
          ),
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  padding: EdgeInsets.only(right: 8.0),
                  child: Text(
                    _model._eventName,
                    style: TextStyle(
                        fontSize: 15,
                        color: Colors.black,
                        fontWeight: FontWeight.w500),
                    textAlign: TextAlign.start,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                ...
              ])
          ),
        ],
      ),
    )
...