Flutter for Web：Android Chrome 底部的文本被截断

Posted 2023-02-23

【中文标题】Flutter for Web：Android Chrome 底部的文本被截断

【英文标题】：Flutter for Web: text cut off at bottom on Android Chrome

【发布时间】：2020-04-11 21:35:39

【问题描述】：

我正在通过 Flutter 构建一个 Web 应用程序，当我尝试使用 android 模拟器的浏览器检查我的 Web 应用程序时，文本的底部会被截断。这可能与 lineSpacingMultiplier 或 LinearLayouts 有关。但我不确定如何使用 Flutter for Web 解决此问题。我没有任何物理 Android 设备。任何帮助表示赞赏！

import 'package:flutter/material.dart';

class TestScreen extends StatelessWidget 

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(),
      body: Center(
          child: Text(
        'good',
        style: TextStyle(
          fontSize: 24.0,
        ),
      )),
    );
  

【问题讨论】：

检查填充...

粘贴您的代码以便更好地理解。

它与填充无关，我找到了为文本添加高度的临时解决方案。

在您的文本样式中添加这样的高度：TextStyle(height: 1.5, ),

height:1.5 将与原始尺寸不匹配，请使用 height:1。感谢您发布解决方案，这似乎是flutter web中的一个错误

【参考方案1】：

add: height: 1.5 解决我的问题。

Text(
                    widget.item.name + '\n' ?? '',
                    overflow: TextOverflow.ellipsis,
                    textAlign: TextAlign.start,
                    style: TextStyle(
                      color: MColors.primaryDarkBlue,
                      fontSize: titleFontSize,
                      fontWeight: FontWeight.normal,
                      height: 1.5,
                    ),
                    maxLines: 2,
                  )