Flutter中Row内Text组件4像素溢出的解决方法

针对你在Row里嵌套Text出现的溢出问题，这里有几种实用的解决办法：

方法1：设置文本溢出截断显示 #

如果希望文本超出部分以省略号或其他形式截断，直接给第二个Text组件添加overflow和maxLines属性即可：

Row(
  children: [
    Text(
      'Reason :',
      style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w600),
    ),
    Padding(
      padding: const EdgeInsets.only(left: 15.0),
      child: Text(
        widget.leavemodel.reason ?? '',
        style: TextStyle(fontSize: 16.0),
        overflow: TextOverflow.ellipsis,
        maxLines: 1,
      ),
    ),
  ],
),

TextOverflow.ellipsis会让溢出部分显示省略号，你也可以根据需求换成TextOverflow.fade（渐隐）或TextOverflow.clip（直接裁剪）。

方法2：用Expanded让文本自动换行 #

如果希望长文本能自动换行展示，而不是截断，用Expanded包裹第二个Text所在的Padding组件，让它占据Row的剩余空间：

Row(
  children: [
    Text(
      'Reason :',
      style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w600),
    ),
    Expanded(
      child: Padding(
        padding: const EdgeInsets.only(left: 15.0),
        child: Text(
          widget.leavemodel.reason ?? '',
          style: TextStyle(fontSize: 16.0),
        ),
      ),
    ),
  ],
),

这样文本超过剩余宽度时会自动换行，不会出现溢出。

方法3：用Flexible实现灵活布局 #

如果不想强制文本占满剩余空间，而是根据内容自适应宽度，同时溢出时自动换行，可以用Flexible替代Expanded：

Row(
  children: [
    Text(
      'Reason :',
      style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w600),
    ),
    Flexible(
      child: Padding(
        padding: const EdgeInsets.only(left: 15.0),
        child: Text(
          widget.leavemodel.reason ?? '',
          style: TextStyle(fontSize: 16.0),
        ),
      ),
    ),
  ],
),

Flexible会让子组件在可用空间内调整大小，内容过长时自动换行，比Expanded更灵活。

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