QT QML 练习5-平铺btn按键

时间:2024-10-15 15:34:49

代码效果在,平铺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:核心模块,提供基础元素如 RectangleText 等。
    • 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: parentanchors.margins: 20 确保布局填充整个父容器并保持一定边距。
  • rowSpacingcolumnSpacing 设置行与列之间的间距,使按钮之间保持适当的距离。

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.colorborder.width 为按钮添加边框,使其视觉上更有层次感。
  • Text 元素用于显示按钮名称 (btn1btn6),并使用 anchors.centerIn: parent 确保文本在按钮内居中显示。

6. UI 美观优化要点

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

7. 知识点

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

学习资源推荐

  1. 官方文档

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

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

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

通过这些资源,你可以进一步掌握如何使用 QtQuickQML 创建复杂的用户界面,同时学会如何优化 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
//}

//}