QT QML 练习5-平铺btn按键

代码效果在，平铺btn 按键

以下是一些学习此代码的相关知识点和文档，以帮助理解 QML 代码中的关键概念：

1. QML 基础知识

• QML（Qt Meta Language 或 Qt Modeling Language） 是一种用户界面描述语言，用于设计现代图形用户界面。
• QML 提供了高度灵活的方式，允许开发者定义 UI 的布局、样式、动画和用户交互。

2. 导入模块

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

• 这些语句导入了 QML 框架中不同的模块：
  • QtQuick：核心模块，提供基础元素如 Rectangle、Text 等。
  • QtQuick.Controls：提供标准的用户界面控件（例如按钮和滑块）。
  • QtQuick.Layouts：提供布局管理功能，例如 GridLayout。

3. 根容器 (Rectangle)

Rectangle {
    width: 400
    height: 300
    color: "#f0f0f0"
    radius: 10
    border.color: "#cccccc"
    border.width: 2
}

• Rectangle 是一个基础的图形元素，用于作为容器或背景。
• 设置了宽度和高度以及圆角半径 (radius: 10)，使得 UI 更加柔和。
• border 设置了边框的颜色和宽度，使其在视觉上显得更加精致。

4. 布局 (GridLayout)

GridLayout {
    id: buttonLayout
    columns: 3
    anchors.fill: parent
    anchors.margins: 20
    rowSpacing: 10
    columnSpacing: 10
}

• GridLayout 是一种布局管理器，用于将子元素以网格的形式排列。
• columns: 3 表示布局中每行包含 3 列元素。
• anchors.fill: parent 和 anchors.margins: 20 确保布局填充整个父容器并保持一定边距。
• rowSpacing 和 columnSpacing 设置行与列之间的间距，使按钮之间保持适当的距离。

5. 重复创建按钮 (Repeater)

Repeater {
    model: 6
    Rectangle {
        id: button
        width: 100
        height: 50
        color: "#4285F4"
        radius: 8
        border.color: "#357ABD"
        border.width: 1

        Text {
            text: "btn" + (index + 1)
            anchors.centerIn: parent
            color: "white"
            font.pixelSize: 18
        }
    }
}

• Repeater 用于重复生成多个 UI 元素，在这里用于创建 6 个矩形按钮。
• 每个按钮都是一个 Rectangle，其宽度和高度分别为 100 和 50，背景颜色为蓝色 (color: "#4285F4")。
• radius: 8 使按钮具有圆角效果，border.color 和 border.width 为按钮添加边框，使其视觉上更有层次感。
• Text 元素用于显示按钮名称 (btn1 到 btn6)，并使用 anchors.centerIn: parent 确保文本在按钮内居中显示。

6. UI 美观优化要点

• 颜色和边框：按钮的背景颜色和边框颜色选择了互相搭配的深浅蓝色 (#4285F4 和 #357ABD)，使得按钮在视觉上有立体感。
• 圆角效果：通过 radius 属性对按钮和根容器进行了圆角处理，使得 UI 更加柔和友好。
• 间距：通过 anchors.margins 以及 rowSpacing 和 columnSpacing 设置了合理的内边距和间距，使整个界面显得更整齐。

7. 知识点

• Rectangle 作为容器：Rectangle 不仅用于绘制简单的矩形，还可以作为布局容器，结合 Repeater 和 GridLayout 来组织内容。
• 布局管理 (GridLayout)：使用 GridLayout 能有效地控制多个组件的位置，使 UI 更加整洁并适应不同的屏幕尺寸。
• Repeater 和 Text 的结合：Repeater 使得组件可以根据模型重复创建，而 Text 在每个按钮上显示特定的编号 (btn1 到 btn6)，这对动态生成 UI 元素非常有用。

学习资源推荐

1. 官方文档：

   • QtQuick 文档 - 提供所有 QtQuick 元素的详细介绍。
   • QtQuick.Layouts 文档 - 帮助你更好地理解如何使用布局管理器。

2. 教程：

   • QML 和 QtQuick 入门 - 这本书提供了从基础到高级的 QML 学习内容，包括动画、布局和用户交互。
   • Qt 官方教程 - 官方提供的 QML 和 QtQuick 的学习教程，包含示例代码和视频。

3. 社区：

   • Qt Forum - Qt 开发者的社区，你可以在这里提问和查找解决方案。
   • Stack Overflow - 针对 QML 的问题，你可以在这里找到很多现有的问题和答案。

通过这些资源，你可以进一步掌握如何使用 QtQuick 和 QML 创建复杂的用户界面，同时学会如何优化 UI 以提供更好的用户体验。

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Rectangle {
    width: 400
    height: 300
    color: "#f0f0f0"
    radius: 10
    border.color: "#cccccc"
    border.width: 2

    GridLayout {
        id: buttonLayout
        columns: 1
        anchors.fill: parent
        anchors.margins: 20
        rowSpacing: 10
        columnSpacing: 10

        // Create rectangles btn1 to btn6
        Repeater {
            model: 10
            Rectangle {
                id: button
                width: 100
                height: 50
                color: "#4285F4"
                radius: 8
                border.color: "#357ABD"
                border.width: 1

                Text {
                    text: "btn" + (index + 1)
                    anchors.centerIn: parent
                    color: "white"
                    font.pixelSize: 18
                }
            }
        }
    }
}

//Window {
//    visible: true
//    width: 640
//    height: 480
//    title: qsTr("Hello World")

//Rectangle{
//    id :btn1
//    x:100;y:120
//    width: 120;height:60
//    color: "coral"
//    border.color: "cornsilk"
//    border.width: 4
//    radius:8
//}
//Rectangle{
//    id :btn2
//    x:btn1.x+btn1.width+20;y:btn1.y
//    width: btn1.width;height:btn1.height
//    color: "coral"
//    border.color: "cornsilk"
//    border.width: 4
//    radius:8
//}

//}