Flutter入门：Text问题集锦

2022-05-14 551

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 在Row中使用TextField出错当我们在一个Row组件中添加一个TextField

在Row中使用TextField出错

当我们在一个Row组件中添加一个TextField，如：

Row(
    children: <Widget>[
      TextField(),
      FlatButton(
        child: Text("go"),
      ),
    ],
  )
复制代码

运行时就会报错

Failed assertion: line 910 pos 7: 'layoutConstraints.maxWidth < double.infinity'

根据网上的经验，需要在TextField外包一层Expanded，如：

Row(
    children: <Widget>[
      Expanded(
        child: TextField(),
      ),
      FlatButton(
        child: Text("go"),
      ),
    ],
  )
复制代码

这样就不会出错了。

Expanded的作用是让组件完全展开，我们通过一个效果图来了解它的作用

网络异常，图片无法展示

中间的红色区域本身只是一个Text，现在是外面包了一层Expanded，这样就使它展开，除去上下其他固定高度的组件，它填充了剩下的所有高度。

如果我们去掉Expanded，那么结果就是

网络异常，图片无法展示

因为Text没有内容，所以实际高度是0，红色区域消失了。当然如果有内容的话，红色区域还是会显示，但只是内容高度，不会扩展。

所以Expanded的大部分都是与Column或Row配合使用的，目前是充满区域。

文字阴影效果

Text(
    "恭喜获得",
    style: TextStyle(
      fontSize: 26,
      fontWeight: FontWeight.bold,
      color: Color(0xFFFFE38B),
      shadows: <Shadow>[
        Shadow(
          offset: Offset(0, 1.5),
          blurRadius: 0,
          color: Color(0xffe31e00),
        )
      ]
    ),
  ),
复制代码

在style中添加shadows即可，shadows是一个List<ui.Shadow>类型，所以可以是多个阴影效果叠加在一起的。

Shadow有三个属性：

offset：分别是x和y的偏移量（正数是向右向下偏移）
blurRadius：模糊度
color：阴影颜色

字体垂直方向不居中

Text(
  "111",
  style: TextStyle(wordSpacing:0),
),
复制代码

这个其实在android平台也有类似的问题，因为默认情况下显示的字体上方有一定的空白，这样尤其在与图片是同一行的时候，就会发现虽然都设置的是垂直居中，当时文字明显稍微靠下一点。

原因就是上方的空白，在flutter可以通过wordSpacing改变这个。

另外还有一个letterSpacing则是每个字或字母之间的间距（水平的）。

文字显示不全

在flutter中，尤其是row或column中，Text显示文字不全，下面少了一点。（windows上更严重，几乎所有Text都有这种现象）

而这些Text并没有设置高度，所以它们的高度应该是根据文字高度动态的。但是还是出现上面的现象。

解决方法与第一个问题一样，将wordSpacing设置成0即可。

但是因为使用Text的地方太多了，没法一个个修改，所以可以全局设置字体样式，在MaterialApp中，如下：

MaterialApp(
  title: title,
  theme: ThemeData(
    ...
    textTheme: TextTheme(
      bodyText1: TextStyle(wordSpacing: 0),
      bodyText2: TextStyle(wordSpacing: 0),
      headline1: TextStyle(wordSpacing: 0),
      headline2: TextStyle(wordSpacing: 0),
      headline3: TextStyle(wordSpacing: 0),
      headline4: TextStyle(wordSpacing: 0),
      headline5: TextStyle(wordSpacing: 0),
      headline6: TextStyle(wordSpacing: 0),
      subtitle1: TextStyle(wordSpacing: 0),
      subtitle2: TextStyle(wordSpacing: 0),
      button: TextStyle(wordSpacing: 0),
      caption: TextStyle(wordSpacing: 0),
      overline: TextStyle(wordSpacing: 0),
    )
  ),
  ...
);
复制代码

可以看到在theme中设置textTheme即可，在这里面有很多种类，我们全部都设置一遍，因为大部分情况下这样显示最优。

那么如果向上面那样，Text又单独设置了style，这个textTheme还会起作用么？

答案是可以，通过源码可以得知，Text（其他widget也类似）中其实是存在一个merge操作的，代码如下：

Widget build(BuildContext context) {
    final DefaultTextStyle defaultTextStyle = DefaultTextStyle.of(context);
    TextStyle effectiveTextStyle = style;
    if (style == null || style.inherit)
      effectiveTextStyle = defaultTextStyle.style.merge(style);
    ...
  }
复制代码