Flutter: как сделать TextOverflow.ellipse в середине текста

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

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

Я также нашел пакет extendex_text но его слишком тяжело добавлять только для такой небольшой проблемы.

Я думаю, что для этого нет какого-либо специального решения: вам нужно создать собственный виджет, разделив текст на две части и поместив эллипс между ними.

Munsif Ali 25.06.2024 06:44

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

DroidFlutter 25.06.2024 07:00
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
2
57
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте приведенный ниже пользовательский виджет, чтобы получить текстовый эллипс в середине строки.

class MiddleEllipsisText extends StatelessWidget {
  final String text;
  final TextStyle? style;

  const MiddleEllipsisText({super.key, required this.text, this.style});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        // Measure the width of the text
        final textPainter = TextPainter(
          text: TextSpan(text: text, style: style),
          maxLines: 1,
          textDirection: TextDirection.ltr,
        )..layout(minWidth: 0, maxWidth: double.infinity);

        if (textPainter.width <= constraints.maxWidth) {
          // Text fits without truncation
          return Text(text, style: style);
        }

        // Calculate the truncation point
        final ellipsis = '...';
        final ellipsisPainter = TextPainter(
          text: TextSpan(text: ellipsis, style: style),
          maxLines: 1,
          textDirection: TextDirection.ltr,
        )..layout(minWidth: 0, maxWidth: double.infinity);

        final ellipsisWidth = ellipsisPainter.width;
        final availableWidth = constraints.maxWidth - ellipsisWidth;
        final charWidth = textPainter.width / text.length;

        // Determine the number of characters that can fit on each side of the ellipsis
        final charsToShow = (availableWidth / (2 * charWidth)).floor();
        final startText = text.substring(0, charsToShow);
        final endText = text.substring(text.length - charsToShow);

        // Create the final truncated text
        final truncatedText = '$startText$ellipsis$endText';

        return Text(truncatedText, style: style);
      },
    );
  }
}

И используйте его, как показано ниже,

Widget build(BuildContext context) {
    return const Scaffold(
        body: Center(
            child: SizedBox(
      width: 200,
      child: MiddleEllipsisText(
        text: '0b8931141868658618615312e2a80Ea5f',
        style: TextStyle(fontSize: 18),
      ),
    )));
  }

Ниже приведен вывод

Другие вопросы по теме