Flutter中TextField的prefixText属性引发布局对齐问题

对齐错位修复 #

把Row的crossAxisAlignment从CrossAxisAlignment.start改成CrossAxisAlignment.baseline，再加上textBaseline: TextBaseline.alphabetic就行。这样两个TextField会以文本基线对齐，不会因为其中一个加了prefixText就出现上下错位。

设置prefixText字体大小 #

当然可以设置，直接在InputDecoration里加prefixStyle属性，就能指定字体大小、颜色等样式。

修改后的完整代码 #

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.baseline,
      textBaseline: TextBaseline.alphabetic,
      children: [
        Expanded(
          child: TextField(
            maxLength: 50,
            decoration: const InputDecoration(
              label: Text('Title'),
            ),
          ),
        ),
        const SizedBox(width: 24),
        Expanded(
          child: TextField(
            maxLength: 7,
            keyboardType: TextInputType.number,
            decoration: const InputDecoration(
              prefixText: 'Rs. ',
              // 自定义prefixText的字体大小、颜色等
              prefixStyle: TextStyle(fontSize: 16, color: Colors.grey[700]),
              label: Text('Amount'),
            ),
          ),
        ),
      ],
    );
  }
}

为啥这么改？ #

原来用CrossAxisAlignment.start是让两个输入框顶部对齐，但加了prefixText的TextField内部文本布局高度有变化，视觉上就错位了。换成基线对齐后，两个输入框的文本基准线统一，对齐就自然了。而prefixStyle就是专门用来控制prefixText样式的属性，字体大小、粗细、颜色都能调。

内容的提问来源于stack exchange，提问作者Twisha Solgama