如何检查 Flutter Text 小部件是否溢出

2024-02-19

我有一个文本小部件,如果超过一定大小,它可以被截断:

ConstrainedBox(
  constraints: BoxConstraints(maxHeight: 50.0),
  child: Text(
    widget.review,
    overflow: TextOverflow.ellipsis,
  )
);

或者最大行数:

RichText(
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
  text: TextSpan(
    style: TextStyle(color: Colors.black),
    text: widget.review,
  ));

我的目标是让文本可扩展only if发生溢出。有没有正确的方法来检查文本是否溢出?

我尝试过的

我发现在RichText中,有一个RenderParagraph renderObject,拥有私有财产TextPainter _textPainter其中有一个bool didExceedMaxLines.

简而言之,我只需要访问richText.renderObject._textPainter.didExceedMaxLines但如您所见,它通过下划线设为私有。


我找到了一种方法来做到这一点。完整代码如下,但简而言之:

  1. 使用 LayoutBuilder 来确定我们有多少空间。
  2. 使用 TextPainter 模拟空间内文本的渲染。

这是完整的演示应用程序:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Overflow Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text("DEMO")),
        body: TextOverflowDemo(),
      ),
    );
  }
}

class TextOverflowDemo extends StatefulWidget {
  @override
  _EditorState createState() => _EditorState();
}

class _EditorState extends State<TextOverflowDemo> {
  var controller = TextEditingController();

  @override
  void initState() {
    controller.addListener(() {
      setState(() {
        mytext = controller.text;
      });
    });
    controller.text = "This is a long overflowing text!!!";
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  String mytext = "";

  @override
  Widget build(BuildContext context) {
    int maxLines = 1;
    double fontSize = 30.0;

    return Padding(
      padding: const EdgeInsets.all(12.0),
      child: Column(
        children: <Widget>[
          LayoutBuilder(builder: (context, size) {
            // Build the textspan
            var span = TextSpan(
              text: mytext,
              style: TextStyle(fontSize: fontSize),
            );

            // Use a textpainter to determine if it will exceed max lines
            var tp = TextPainter(
              maxLines: maxLines,
              textAlign: TextAlign.left,
              textDirection: TextDirection.ltr,
              text: span,
            );

            // trigger it to layout
            tp.layout(maxWidth: size.maxWidth);

            // whether the text overflowed or not
            var exceeded = tp.didExceedMaxLines;

            return Column(children: <Widget>[
              Text.rich(
                span,
                overflow: TextOverflow.ellipsis,
                maxLines: maxLines,
              ),
              Text(exceeded ? "Overflowed!" : "Not overflowed yet.")
            ]);
          }),
          TextField(
            controller: controller,
          ),
        ],
      ),
    );
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何检查 Flutter Text 小部件是否溢出 的相关文章

  • Flutter blue plus 在发布模式下不起作用

    flutter run release Launching lib main dart on motorola one vision in release mode Running Gradle task assembleRelease 3
  • 在应用程序开发中缩放字体大小的理想方法是什么?

    我知道这个问题可能听起来有点奇怪 我是 Flutter 开发的新手 在使我的应用程序响应时 我在缩放文本时总是遇到问题 如果我保持字体大小不变 例如 10 或 20 有时在高分辨率设备上看起来太小 在小手机上看起来太大 然后我尝试根据屏幕尺
  • 如何在 Flutter 中显示 Android Activity?

    我目前正在开发一个在 flutter 中使用 Google Maps Api 的应用程序 由于支持不完整 我只能使用静态地图 点击它会导致 Android 活动没有用 我需要的是一张地图 我可以在其中搜索位置并向该位置添加标记 那么是否可以
  • 意外的迭代器函数和 Iterable.take 行为

    我正在编写一个名为 批次 的简单函数 该函数应该将一个可迭代对象拆分为大小为 size 的可迭代对象的可迭代对象 然后我遇到了生成器函数和 Iterable take 方法的奇怪行为 当期望 知道 python 生成器行为时 这段代码 It
  • iOS 有 INTERNET 权限吗?

    我在 iOS 设备上的 flutter dio 包上遇到了一个奇怪的问题 我编写了一个向 url 发送 GET 请求的应用程序 Android 上一切正常 但 iOS 上的请求似乎无法通过 没有发生任何错误 什么也没有 我在 Android
  • Dart/Flutter 如何编译到 Android?

    我找不到任何具体的资源 Dart 是否被编译到 JVM 或者 Google 的团队是否编译了 Dart VM 以在 JVM 上运行 然后在 JVM 内的 Dart VM 中运行 Dart 前者更有意义 并且符合 无桥 的口号 但后者似乎更符
  • 使用 flutter 构建 iOS 项目时出现的问题

    升级 Xcode 15 beta 5 后 无法构建项目 显示错误 Firebase 1 问题 DT TOOLCHAIN DIR 不能用于评估 LIBRARY SEARCH PATHS 请改用 TOOLCHAIN DIR FirebaseAn
  • 将方法作为参数传递给小部件

    我有一个自定义按钮小部件 class Button extends StatelessWidget final String text Button this text override Widget build BuildContext
  • 所有侧面的 ElevatedButton 填充不会修改

    我有一个具有以下属性的 ElevatedButton 我在这里附上一张照片 https i stack imgur com oH3pO png https i stack imgur com oH3pO png ElevatedButton
  • flutter:如何使用共享首选项保存 List

    如何持久保存一个列表List
  • 颤振:flutter_markdown 字体大小

    使用 flutter markdown 时有什么方法可以改变文本的字体大小吗 就像向文本小部件提供 TextStyle 一样 谢谢 Markdown data html2md convert article content styleShe
  • 如何更改或替换 Flutter 中的 ImageCache?

    我想更改 Flutter 应用程序中 ImageCache 的行为 例如 我想尝试不同的驱逐策略 或者 我只是想要零缓存 用于实验 如何替换更改ImageCache 创建一个继承自 WidgetsFlutterBinding 的类 重写该类
  • 将两个 @observable 变量动态绑定(或格式化)到第三个 @observable 变量

    这是我认为可能更容易一些的事情 尽管问题很具体 但我对任何能让我根据 Polymer dart 其他两个字段的内容自动更新第三个表单字段的方法感兴趣 像这样 其中 代表表单字段 姓名 名字 姓氏 全名 家庭名称 名字 例如 如果有人进入 J
  • 保存用户可以访问的 Flutter Android 应用程序中的文本文件

    我在 Flutter 中开发的 Android 应用程序的用户应该能够将一些数据保存 导出 到文本文件中 用户应该能够使用其他应用程序 包括文件管理器 在其 Android 设备上找到并访问此文件 我想 final directory aw
  • 如何根据父级的大小来布局小部件?

    假设您有一个可能具有可变大小的父窗口小部件 例如 var container new Container height 200 0 Imagine this might change width 200 0 Imagine this mig
  • DraggableScrollableSheet 拖动时不会给出工作表的当前位置

    在flutter中我们有一个小部件可拖动可滚动表 现在我想要子元素拖动时的当前位置或当前大小 目前还没有办法获得该值 它在其构建器方法中提供了 ScrollController 但那是在列表滚动时而不是在拖动列表时 那么还有另一种方法可以跟
  • 当 TextFormField 聚焦时如何隐藏错误外观

    我在用着TextFormField用于表单和自定义验证器方法返回错误消息 我试图隐藏默认错误消息和错误边框TextFormField当文本字段获得焦点时 TextFormField focusNode focusNode validator
  • 使用 Flutter Flavor 运行调试?

    我正在尝试在 Visual Studio 代码上为我的 flutter 应用程序运行调试模式 单击 运行和调试 但是当我这样做时 我面临以下问题 The Xcode project defines schemes release priva
  • Dart 客户端 HttpRequest 错误/身份验证处理

    我有一个 Dart 客户端和一个 Java 后端 我正在尝试增加应用程序的安全性 因此 Java 服务器要求用户在访问数据之前进行身份验证 如果传入 Web 服务调用并且用户未经过身份验证 则后端服务会将带有 HttpResponseCod
  • 如何使用 Dart 构建枚举? [复制]

    这个问题在这里已经有答案了 Dart 语言没有枚举 还没有 至少在语言功能出现之前 构建枚举的正确或惯用的方法是什么 Dart 现在支持枚举 这个答案的其余部分适用于 Dart 1 8 请使用 Dart 对枚举的正式支持 在另一个答案中进行

随机推荐