网页颤动：底部的文字被切断

Posted 2023-02-23

【中文标题】网页颤动：底部的文字被切断

【英文标题】：flutter for web: text cut off at bottom

【发布时间】：2020-04-27 13:02:01

【问题描述】：

使用 web flutter，当我显示文本时，我的文本在底部被剪切，我尝试放置填充，但它不起作用。

这个问题这个产品无处不在，甚至在TextField上

    new Container(
      width: menuRightWidthDesktop,
      height: getSize == 0 ? heightHeaderDesktop : getSize == 1 ? heightHeaderTablette : heightHeaderMobile,
      color: Colors.red,
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          new GestureDetector(
            child: new Container(
              color: Colors.indigoAccent,
              child: new Text("Surfeur >"),
            ),
            onTap: () ,
          ),
          new GestureDetector(
            child: new Text("Photographe >", ),
            onTap: () ,
          ),
        ],
      ),
    ),

【问题讨论】：

请尝试这个命令看看它是否有效。 github.com/flutter/engine/pull/13929

flutter run -d web-server --release --dart-define=FLUTTER_WEB_USE_EXPERIMENTAL_CANVAS_TEXT=true

【参考方案1】：

我在 FireFox 中遇到了同样的问题，所以我尝试了一些解决方法，但似乎都没有奏效，所以我检查了 flutter doctor 使用的颤振版本。我已经在使用 beta 频道（版本 1.25.0...）。由于有更新的 beta 版本可用，我运行 flutter upgrade 并升级到版本 1.26.0....pre.

这个问题刚刚消失了，所以我猜它在更新的版本中得到了修复。

所以...只需将 Flutter 升级到最新的 beta 版本。

【参考方案2】：

@madebyAyan 的回答对我有用。此外，我将其添加为主题以避免在多个地方重复部分。

  TextTheme _buildTextTheme(TextTheme base) 
    return base.copyWith(
      bodyText2: base.bodyText2?.copyWith(
        height: 1.1,
      ),
    );
  

【参考方案3】：

使用文本属性 TextBaseline.ideographic ：

Text("Surfeur >",
  style: TextStyle(
     textBaseline: TextBaseline.ideographic,
  ),
),

【参考方案4】：

我遇到了同样的问题，并通过将文本的 height 属性增加一个小值来解决它

Text("Surfeur >",
  style: TextStyle(
    height: 1.1,
  ),
),

【讨论】：

它对我有用。我将此设置为主题以避免在多个地方重复。

【参考方案5】：

有一个新的拉取请求https://github.com/flutter/engine/pull/13929 基于Canvas2d的文本测量实验实现

您可以使用以下命令

flutter run -d web-server --release --dart-define=FLUTTER_WEB_USE_EXPERIMENTAL_CANVAS_TEXT=true