QML Row 和 RowLayout 的区别

在 QML 开发中，一提到水平排列，很多人脑子里会蹦出两个组件：Row 和 RowLayout。它们看起来都能把子项从左到右排成一行，但如果你只是随手拖一个出来用，很可能掉进“布局错乱”、“性能瓶颈”的坑里。

这篇文章就来把这对“孪生兄弟”彻底拆开，从原理、行为、性能到最佳实践，一次讲清楚。

---

一、一眼看穿：它们是什么？

组件	所属模块	核心用途
Row	QtQuick	定位器（Positioner），只负责将子项按顺序摆放
RowLayout	QtQuick.Layouts	布局管理器（Layout），在摆放的同时管理子项的大小和伸缩行为

简单说：

• Row 是“我把你们按顺序排好，但你们原来多宽多高，自己说了算”。
• RowLayout 是“我来统筹分配空间，你们可以按比例伸缩，还能有最小/最大约束”。

---

二、Row：定位器，而非布局器

Row 继承自 Item，它只负责几何排列，不参与子项尺寸的管理。默认所有子项会按照它们自己的 width、height 紧密排列。

基本示例

Row {
    spacing: 10
    Rectangle { width: 50; height: 50; color: "red" }
    Rectangle { width: 80; height: 80; color: "green" }
    Rectangle { width: 30; height: 30; color: "blue" }
}

关键特性

• 按需排列：子项的尺寸完全由自身决定，Row 不会拉伸或压缩。
• 可换行：Row 本身不换行，但它有个兄弟叫 Flow，可以实现自动换行。
• 性能优：因为不涉及复杂的尺寸协商，适合静态内容或项数极多的列表。
• 对齐能力：可以通过 layoutDirection、spacing、padding 等调整，但不能像 Layout 那样让子项撑满空间。

你可能踩的坑

Row {
    width: 300
    Rectangle { width: 50; height: 50; color: "red" }
    Rectangle { width: 50; height: 50; color: "green" }
}

这段代码中，Row 的宽度是 300，但两个矩形只占了 100 像素，右侧会留出空白。如果你期望它们自动拉伸填满，Row 做不到——你需要用 RowLayout。

---

三、RowLayout：统筹全局的布局器

RowLayout 来自 QtQuick.Layouts 模块，它是真正的布局管理器。每个子项必须附加 Layout 属性对象，让布局系统知道“你希望在空间分配中扮演什么角色”。

基本示例

import QtQuick.Layouts

RowLayout {
    spacing: 10
    width: 300
    Rectangle {
        Layout.fillWidth: true
        Layout.preferredWidth: 50
        height: 50
        color: "red"
    }
    Rectangle {
        Layout.fillWidth: true
        Layout.preferredWidth: 80
        height: 50
        color: "green"
    }
}

关键特性

• 空间分配：通过 Layout.fillWidth、Layout.fillHeight 决定子项是否拉伸。
• 尺寸约束：Layout.minimumWidth/maximumWidth、Layout.preferredWidth 等，构成一套完整的“尺寸协商”机制。
• 动态响应：父容器尺寸变化时，子项会自动按比例调整。
• 跨平台一致性：搭配 Layout.margins、Layout.alignment 轻松实现像素级精确界面。

强大之处：比例分配

RowLayout {
    width: 400
    Rectangle {
        Layout.fillWidth: true
        Layout.preferredWidth: 1   // 占比权重 1
        color: "red"
    }
    Rectangle {
        Layout.fillWidth: true
        Layout.preferredWidth: 2   // 占比权重 2
        color: "green"
    }
}

此时如果总宽度为 400，红色矩形将得到约 133 像素，绿色得到约 266 像素（扣除 spacing 后）。preferredWidth 在这里扮演“伸缩因子”的角色。

---

四、核心区别对照表

特性	Row	RowLayout
模块	QtQuick	QtQuick.Layouts
子项尺寸管理	子项自己决定	布局系统协商分配
拉伸/收缩	不支持	Layout.fillWidth 等
最小/最大尺寸约束	无	Layout.minimumWidth 等
响应父容器变化	不会	会自动调整
性能	更轻量	稍重（需计算协商）
适用场景	固定尺寸、静态内容	响应式界面、多分辨率适配
换行能力	无（需换成 Flow）	无（需换成 GridLayout 等）

---

五、什么时候用哪个？

优先用 Row 的情况

1. 所有子项都有固定宽高，不需要自适应父容器。
2. 高性能场景：比如大量重复的列表项内部排列，避免布局协商的开销。
3. 简单原型：快速搭建，不想导入 Layouts 模块。
4. 搭配 Repeater 生成大量静态元素。

Row {
    Repeater {
        model: 1000
        delegate: Rectangle {
            width: 10; height: 10
            color: index % 2 ? "gray" : "lightgray"
        }
    }
}

优先用 RowLayout 的情况

1. 需要响应窗口大小变化，子项要随之拉伸或收缩。
2. 界面需要支持不同屏幕尺寸（桌面、平板、嵌入）。
3. 有比例分配需求（例如左侧导航固定宽，右侧内容区撑满）。
4. 需要设置最小/最大尺寸约束，防止内容过小或过大。

RowLayout {
    anchors.fill: parent
    Rectangle {
        Layout.fillWidth: true
        Layout.minimumWidth: 100
        color: "sidebar"
    }
    Rectangle {
        Layout.fillWidth: true
        Layout.fillHeight: true
        color: "content"
    }
}

---

六、进阶：两者混用的艺术

一个复杂的界面通常不会非黑即白。很多资深开发者的做法是：

• 外层使用 Layout 系列（RowLayout、ColumnLayout、GridLayout）做大的区域划分。
• 内层固定排列用 Row/Column，减少不必要的布局嵌套。

ColumnLayout {
    anchors.fill: parent
    // 头部：固定高度，内部用 Row 排列图标
    Row {
        Layout.fillWidth: true
        height: 40
        IconButton { ... }
        IconButton { ... }
    }
    // 内容区：用 RowLayout 实现左右分栏
    RowLayout {
        Layout.fillWidth: true
        Layout.fillHeight: true
        Sidebar { Layout.preferredWidth: 200 }
        ContentArea { Layout.fillWidth: true }
    }
}

这样既保证了顶层结构的弹性，又避免了过深的布局计算。

---

七、性能陷阱与建议

• 不要用 RowLayout 去承载巨型列表的每行。如果列表有成百上千行，每行内部使用 RowLayout 会造成巨大的布局计算量。此时应改用 Row 配合固定尺寸，甚至用 Canvas 自绘。
• RowLayout 嵌套过深会导致“布局抖动”，尤其在窗口缩放时。尽量扁平化布局结构。
• 谨慎混用 anchors 与 Layout。当一个 Item 同时处于 Layout 内部又使用了 anchors.fill: parent 时，会导致冲突或未定义行为。子项应通过 Layout.fillWidth 等来控制尺寸。

---

八、总结

[ Row ]	[ RowLayout ]
我只是顺序排列	我管理每个孩子的空间
子项：我多宽就是多宽	子项：Layout.fillWidth: true
父容器变了？与我无关	父容器变了？兄弟们按比例缩放！
性能：★★★★★	性能：★★★★☆
适用：图标组、固定按钮栏	适用：响应式面板、多屏适配