Как использовать многоточие на текстовом виджете, занимающем несколько строк? - PullRequest
Новая
       79

Как использовать многоточие на текстовом виджете, занимающем несколько строк?

0 голосов
/ 15 октября 2019

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

Я хочу, чтобы многоточие было применено к последней строке в текстовом поле.
слева: многоточие, справа: затухание

enter image description here enter image description here

Код: 

class _LockedCardState extends State<LockedCard> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      width: 250,
      child: Card(
        clipBehavior: Clip.antiAlias,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
        ),
        child: Stack(
          fit: StackFit.expand,
          children: [
            Image.network(
              widget.imgUrl,
              fit: BoxFit.cover,
            ),
            Container(color: Color(0x40000000)),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 12.0),
              child: Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(top: 16.0),
                    child: Text(widget.cardTitle,
                        style: Theme.of(context).textTheme.title.copyWith(color: Colors.white)),
                  ),
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 8.0),
                      child: Text(
                        widget.cartBody,
                        style: Theme.of(context).textTheme.body1.copyWith(color: Colors.white),
                        softWrap: true,
                        overflow: TextOverflow.ellipsis, //Overflow breaks on first line, even if softWrap = true.
                        textAlign: TextAlign.justify,
                      ),
                    ),
                  ),
                  Center(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 8.0, bottom: 16.0),
                      child: Align(
                        alignment: Alignment.bottomRight,
                        child: AppButtonSmall(
                          onPress: widget.onPress,
                          title: widget.buttonTitle,
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Как применить многоточие, только если последняя строка переполнена?

1 Ответ

1 голос
/ 15 октября 2019

Установите свойство maxLines в текстовом виджете. 

Text(
  widget.cartBody,
  style: Theme.of(context).textTheme.body1.copyWith(color: Colors.white),
  softWrap: true,
  overflow: TextOverflow.ellipsis, //Overflow breaks on first line, even if softWrap = true.
  textAlign: TextAlign.justify,

  maxLines: 9,
),

Надеюсь, это поможет!

...