InkWell 中的文本应用溢出不工作

Posted 2023-02-23

【中文标题】InkWell 中的文本应用溢出不工作

【英文标题】：Text inside InkWell with overflow applied not working flutter

【发布时间】：2020-12-21 13:12:28

【问题描述】：

类似下面的简单代码在 TextOverflow 上失败 - 将“searchLocationAddress”替换为非常长的文本。颤振 1.17.5。所有提供的解决方案 - 灵活、可扩展等都失败了。故障排除范围缩小到 InkWell，如果 InkWell 被移除，省略号、淡入淡出等工作。如果替换为 GestureDetector，则会出现与 InkWell 相同的问题 - 不应用 TextOverFlow。包装文本以检测点击和操作并仍然应用 OverFlow 的最佳方法是什么？

Column(
    children: <Widget>[
      Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            InkWell(
              onTap: () => _navigateAndDisplaySelection(),
              child: Text(
                searchLocationAddress.isEmpty ||
                        searchLocationAddress == null
                    ? "No Location"
                    : searchLocationAddress,
                overflow: TextOverflow.ellipsis,
              ),
            )
          ],
        ),
      ),
    ],
  );

【问题讨论】：

您的宽度是动态的。您是否尝试过为行、容器或列设置宽度，以便确定墨水池溢出边界。

【参考方案1】：

我想通了 - 最好是用容器和扩展或灵活包装 InkWell 或 GestureDector。以下对我有用：

Column(
children: <Widget>[
  Container(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Flexible(Wrap Container with Flexible or Expanded.
                      child: Container(//wrap InkWell with Container
            child: InkWell(
              onTap: () => _navigateAndDisplaySelection(),
              child: Text(
                searchLocationAddress.isEmpty ||
                        searchLocationAddress == null
                    ? "No Location"
                    : searchLocationAddress,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ),
        )
      ],
    ),
  ),
],
);