Flutter实现文本两侧水平分割线问题求助

问题核心是Divider在Row布局中缺少宽度约束——Row属于水平弹性布局，直接放入Divider时，它无法获取到有效宽度空间，会被压缩至不可见状态。

只需用Expanded组件包裹两个Divider，让它们占据Row中除文本外的剩余水平空间即可，修改后的代码如下：

Widget showDivider() {
  return Padding(
    padding: const EdgeInsets.only(top: 8.0, bottom: 8.0),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Expanded(
          child: Divider(
            indent: 10,
            endIndent: 10,
            thickness: 5.0,
            color: Colors.black87,
          ),
        ),
        const Text('or'),
        Expanded(
          child: Divider(
            indent: 10,
            endIndent: 10,
            thickness: 5.0,
            color: Colors.black87,
          ),
        ),
      ],
    ),
  );
}

额外优化建议：

• 将mainAxisAlignment设为center，让文本在分割线中间更对称
• 可以移除Divider的height参数，因为Row的crossAxisAlignment已设为center，该参数对水平分割线的展示作用不大

修改后，两个Divider会自动填充文本左右两侧的可用空间，实现你需要的“文本两侧带水平分割线”的效果。

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