Мне нужно создать пользовательский интерфейс, подобный изображенному выше, но он не связан с длиной строки. Он будет ограничен шириной родительского виджета, который его содержит.
Я провел небольшое исследование и увидел ту же проблему здесь, но нет ответа, который мог бы решить мою проблему.
Я также нашел пакет extendex_text но его слишком тяжело добавлять только для такой небольшой проблемы.
Вы можете добиться аналогичного эффекта, манипулируя текстовой строкой, например, усекая текст и добавляя многоточие посередине... вычисляет, насколько нужно обрезать левую и правую часть текста, и вставляет... в середину.
Используйте приведенный ниже пользовательский виджет, чтобы получить текстовый эллипс в середине строки.
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),
),
)));
}
Ниже приведен вывод
Я думаю, что для этого нет какого-либо специального решения: вам нужно создать собственный виджет, разделив текст на две части и поместив эллипс между ними.