Flutter实现餐厅菜单文本对齐问题求助

你的核心问题是把分割线放在了条目下方，而预期效果是菜名与价格之间用虚线连接，同时条目整体对齐。以下是调整后的代码：

return Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.baseline,
        textBaseline: TextBaseline.alphabetic,
        children: [
          // 菜名左对齐
          Text(text, style: style),
          const SizedBox(width: 10),
          // 中间填充虚线
          Expanded(
            child: Container(
              height: 1,
              decoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(
                    color: Colors.white.withOpacity(0.5),
                    style: BorderStyle.dashed,
                    width: 1,
                  ),
                ),
              ),
            ),
          ),
          const SizedBox(width: 10),
          // 价格右对齐
          Text('\$ $price', style: style),
        ],
      ),
    ),
    // 可选：条目之间的底部分割线（按需保留）
    Divider(
      color: Colors.white.withOpacity(0.3),
      indent: 16,
      endIndent: 16,
      height: 1,
    ),
  ],
);

关键修改点： #

1. 把中间的分隔线从单独一行的Divider改成了Row内部的Expanded容器，让它填充菜名和价格之间的剩余空间，实现虚线连接效果。
2. 添加crossAxisAlignment: CrossAxisAlignment.baseline和textBaseline，确保菜名和价格在同一文字基线对齐，视觉更协调。
3. 用Padding控制条目整体的边距，避免和ListTile自带的内边距冲突（直接用ListTile会限制布局灵活性，换成自定义Row更可控）。

如果不需要虚线，只想用实线，把中间的Container替换成Divider即可：

Expanded(
  child: Divider(
    color: Colors.white.withOpacity(0.5),
    thickness: 1,
    indent: 5,
    endIndent: 5,
  ),
),

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