QML教程06 - Row：水平布局就这么简单

最新推荐文章于 2026-08-19 10:51:35 发布

原创最新推荐文章于 2026-08-19 10:51:35 发布 · 120 阅读

1 GEO检测

从零开始学QML 专栏收录该内容

16 篇文章 ¥89.90 ¥99.00

订阅专栏

QML教程06 - Row：水平布局就这么简单

本文是《QML从入门到实战》系列的第六篇，讲Row控件的实战用法。
💡 本文配有完整的可运行源码和练习答案，需要的话可以文末获取。

前言：为什么要用Row？

刚开始学QML的时候，我都是手动设置x坐标来排列元素。后来发现这样做有两个大问题：

窗口大小变化时，布局就乱了
元素数量变化时，要一个个调整坐标

用Row就不一样了，它会自动计算位置，你只需要设置间距就行。

比如做一个工具栏、按钮组、导航栏，用Row会省很多事。

本节效果预览

学完本节，你能用Row做出这些效果：

一、最简单的Row

Row会自动把子元素从左到右排列。

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

效果： [红] [绿] [蓝]，中间间隔10像素。

重点： Row会自动计算宽度，通常不需要手动设置width。

二、核心属性

1. spacing - 间距

最重要的属性。

Row {
    spacing: 20  // 子元素之间间隔20像素
    
    Rectangle { width: 100; height: 50; color: "red" }
    Rectangle { width: 100; height: 50; color: "green" }
    Rectangle { width: 100; height: 50; color: "blue" }
}

2. layoutDirection - 布局方向

Row {
    layoutDirection: Qt.RightToLeft  // 从右到左
    spacing: 10
    
    Rectangle { width: 50; height: 50; color: "red" }
    Rectangle { width: 50; height: 50; color: "green" }
    Rectangle { width: 50; height: 50; color: "blue" }
}

效果： [蓝] [绿] [红]

应用场景： 阿拉伯语、希伯来语等从右到左的语言界面。

3. padding - 内边距

Rectangle {
    width: 300
    height: 100
    color: "#f0f0f0"
    
    Row {
        spacing: 10
        padding: 20  // 所有方向内边距20px
        
        Rectangle { width: 50; height: 50; color: "red" }
        Rectangle { width: 50; height: 50; color: "green" }
    }
}

三、子元素对齐

Row中的子元素默认顶部对齐，可以用锚点调整。

垂直居中对齐

Row {
    height: 100
    spacing: 10
    
    Rectangle {
        width: 50
        height: 30
        color: "red"
        anchors.verticalCenter: parent.verticalCenter
    }
    
    Rectangle {
        width: 50
        height: 50
        color: "green"
        anchors.verticalCenter: parent.verticalCenter
    }
    
    Rectangle {
        width: 50
        height: 70
        color: "blue"
        anchors.verticalCenter: parent.verticalCenter
    }
}

四、实战场景

1. 工具栏

Rectangle {
    width: 400
    height: 60
    color: "#2c3e50"
    
    Row {
        anchors.centerIn: parent
        spacing: 15
        
        Repeater {
            model: ["📁", "✂️", "📋", "💾", "🖨️"]
            
            Rectangle {
                width: 45
                height: 45
                color: "#34495e"
                radius: 5
                
                Text {
                    anchors.centerIn: parent
                    text: modelData
                    font.pixelSize: 22
                }
                
                MouseArea {
                    anchors.fill: parent
                    cursorShape: Qt.PointingHandCursor
                    onClicked: console.log("点击:", modelData)
                }
            }
        }
    }
}

2. 按钮组

Row {
    spacing: 10
    
    Button { text: "确定"; width: 80 }
    Button { text: "取消"; width: 80 }
    Button { text: "应用"; width: 80 }
}

3. 表单标签和输入框

Row {
    spacing: 10
    
    Label {
        text: "用户名："
        width: 80
        anchors.verticalCenter: parent.verticalCenter
    }
    
    TextField {
        width: 200
        placeholderText: "请输入用户名"
    }
}

五、踩过的坑

坑1：子元素溢出

问题： 手动设置了Row的width，但子元素总宽度超过了。

// ❌ 错误：子元素会溢出
Row {
    width: 100  // 太小
    spacing: 10
    
    Rectangle { width: 80; height: 50; color: "red" }
    Rectangle { width: 80; height: 50; color: "green" }
}

解决方法： 不设置width，让Row自动计算。

// ✅ 正确
Row {
    spacing: 10
    
    Rectangle { width: 80; height: 50; color: "red" }
    Rectangle { width: 80; height: 50; color: "green" }
}

坑2：spacing不生效

原因： 子元素使用了绝对定位（x坐标）。

// ❌ 错误
Row {
    spacing: 10
    
    Rectangle { x: 0; width: 50; height: 50; color: "red" }
    Rectangle { x: 100; width: 50; height: 50; color: "green" }
}

// ✅ 正确：不要设置x
Row {
    spacing: 10
    
    Rectangle { width: 50; height: 50; color: "red" }
    Rectangle { width: 50; height: 50; color: "green" }
}