Flutter按钮悬停时文本字间距异常问题求助

嘿，这个问题确实有点诡异——两个配置几乎一模一样的按钮，悬停其中一个居然会影响到文本的字间距。结合你贴的代码，我大概率能锁定是布局联动+按钮状态变化在搞鬼，具体原因和解决办法如下：

可能的触发原因 #

• FittedBox的自适应特性“牵一发而动全身”：你给每个FlatButton都套了FittedBox，这个组件会完全跟着子元素的尺寸调整自身大小。而FlatButton在hover状态下，Flutter默认会给它加一些状态样式（比如轻微的高亮、阴影或缩放），导致按钮的实际尺寸出现微小变化。这时候FittedBox会跟着调整，进而带动整个Row重新计算布局，另一个按钮的文本排版就会被干扰，看起来字间距变了。
• 文本样式未锁定字间距：如果你的Styles.boldBodyText()里没有明确设置letterSpacing属性，当布局发生微小偏移时，Text组件会重新计算文本排版，导致字间距出现肉眼可见的波动。

针对性解决方案 #

方案1：给按钮固定尺寸，切断FittedBox的自适应联动 #

既然FittedBox会跟着按钮尺寸变化，那咱们直接给FlatButton设置固定宽高，让FittedBox没有调整空间：

FlatButton(
  // 新增固定尺寸，数值按需调整
  minWidth: 120,
  height: 60,
  padding: EdgeInsets.symmetric(horizontal: 40.0, vertical: 15.0),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(80.0),
    side: BorderSide(color: Colors.white, width: 3),
  ),
  onPressed: () => Navigator.of(context).pushNamed(EnterView.routeName),
  child: Text('YES', style: Styles.boldBodyText()),
)

按钮尺寸固定后，hover时的状态变化就不会影响FittedBox和Row的布局，文本自然不会乱跳。

方案2：锁定Text的字间距，避免排版重算 #

在你的Styles.boldBodyText()里明确加上letterSpacing，固定字间距数值，不管布局怎么变，文本排版都不会动：

// 假设你的Styles类结构如下，新增letterSpacing属性
static TextStyle boldBodyText() {
  return TextStyle(
    fontWeight: FontWeight.bold,
    fontSize: 16,
    color: Colors.white,
    // 固定字间距，按需调整数值，比如0或0.5
    letterSpacing: 0.3,
  );
}

方案3：移除FittedBox，用更稳定的布局控制 #

其实你的按钮文本是固定短文本（YES/NO），FittedBox完全是多余的。直接去掉它，用Row的对齐方式控制按钮位置，布局会更稳定：

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    FlatButton(
      padding: EdgeInsets.symmetric(horizontal: 40.0, vertical: 15.0),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(80.0),
        side: BorderSide(color: Colors.white, width: 3),
      ),
      onPressed: () => Navigator.of(context).pushNamed(EnterView.routeName),
      child: Text('YES', style: Styles.boldBodyText()),
    ),
    SizedBox(width: 30.0),
    FlatButton(
      padding: EdgeInsets.symmetric(horizontal: 40.0, vertical: 15.0),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(80.0),
        side: BorderSide(color: Colors.white, width: 3),
      ),
      onPressed: _toNotQueue,
      child: Text('NO', style: Styles.boldBodyText()),
    ),
  ],
)

推荐先试试方案3，最直接高效；如果必须保留FittedBox，方案1或2也能完美解决问题～

内容的提问来源于stack exchange，提问作者Ray C