Flutter入门：Text问题集锦

BennuCTech
1,047 阅读3分钟

「这是我参与2022首次更文挑战的第21天，活动详情查看：2022首次更文挑战」

在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的作用是让组件完全展开，我们通过一个效果图来了解它的作用 stickPicture.png

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

如果我们去掉Expanded，那么结果就是 stickPicture (1).png

因为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);
    ...
  }

可以看到在一开始，将defaultTextStyle和我们单独为这个Text设置的style进行了merge，然后才设置样式，所以只要程序里没有覆盖这个属性，那么就会一直起作用。

上面的app样式还有更多配置，可以提前设定，减少后续的代码和配置，方便全局更改。

avatar
文章
阅读
粉丝