qml入门

news2024/12/24 9:41:34

window

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window { //root控件，父窗口是主界面
    width: 640
    height: 480
    visible: true

    //相对于父控件的偏移量
    x: 100
    y:100


    minimumWidth: 400   //最小宽度
    minimumHeight: 300  //最小高度
    maximumWidth: 600   //最大宽度
    maximumHeight: 450  //最大高度

    opacity: 0.9 //0-1，窗口透明度

    onWidthChanged: {
        console.log("width: ", width)
    }

    Button {
        id: btn1
        width: 80
        height: 80
        focus: true
        objectName: "btn1"
        background: Rectangle {
            border.color: btn1.focus ? "blue" : "red"
        }
        onClicked: {
            console.log("btn1 clicked")
        }
        Keys.onRightPressed: {
            btn2.focus = true
        }
    }

    Button {
        id: btn2
        x: 120
        width: 80
        height: 80
        objectName: "btn2"
        background: Rectangle {
            border.color: btn2.focus ? "blue" : "red"
        }
        onClicked: {
            console.log("btn2 clicked")
        }
        Keys.onLeftPressed: {
            btn1.focus = true
        }
    }

    //保存了整个窗口中当前获取焦点的控件
    onActiveFocusItemChanged: {
        console.log("active focus item changed", activeFocusItem, activeFocusItem.objectName)
    }

    title: qsTr("my qml")
}

在这里插入图片描述

Item与Rectangle

Rectangle控件：自身属性不多，但它继承自Item，因此Item的诸多属性可以使用

  • focus属性
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
        x: 100
        y: 100
        z: 1
        width : 100
        height: 50
        color: "red"
        focus: false  //当前控件可获取焦点

        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log("on clicked")
            }
        }

        Keys.onReturnPressed: {
            console.log("on return pressed")
        }

    }

    Rectangle {
        x: 120
        y: 120
        width : 100
        height: 50
        color: "green"
    }
}
  • anchor属性
  1. anchors.fill → \to →填充父控件
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
        id: rect1
        anchors.fill: parent
        color: "red"
    }

    Rectangle {
        id: rect2
        width : 100
        height: 50
        color: "green"
    }
}

在这里插入图片描述

  1. anchors.left、anchors.leftMargin、anchors.top、anchors.topMargin
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
        id: rect1
        width : 100
        height: 50
        color: "red"
    }

    Rectangle {
        id: rect2
        width : 100
        height: 50
        anchors.left: rect1.right
        anchors.leftMargin: 20
        color: "green"
    }

    Rectangle {
        id: rect3
        width : 100
        height: 50
        anchors.top: rect1.bottom
        anchors.topMargin: 20
        color: "blue"
    }
}

在这里插入图片描述
3. anchors.centerIn、anchors.horizontalCenter、anchors.verticalCenter

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
        id: rect1
        width : 100
        height: 50
        color: "red"
        //anchors.centerIn: parent
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
    }
}

在这里插入图片描述
4. border

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
        id: rect1
        x: 320
        y: 240
        width : 100
        height: 100
        color: "red"

        border.color: "blue"
        border.width: 3

		radius: 5
    }
}

在这里插入图片描述
5. gradient

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
        id: rect1
        x: 320
        y: 240
        width : 100
        height: 100
        color: "red"

        gradient: Gradient {
                 GradientStop { position: 0.0; color: "lightsteelblue" }
                 GradientStop { position: 1.0; color: "blue" }
             }
    }
}

在这里插入图片描述

Rectangle自定义边框

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    MyRectangle {
        x: 200
        y: 200

        myTop: 10
        myBottom: 10
    }
}

MyRectangle.qml

import QtQuick 2.15

Rectangle {
    id: borderRect
    property int myTop: 0
    property int myBottom: 0
    width: 200
    height: 100
    color: "red"
    Rectangle {
        id: innerRect
        color: "blue"
        anchors.fill: parent
        anchors.topMargin: myTop
        anchors.bottomMargin: myBottom
        anchors.leftMargin: 5
        anchors.rightMargin: 5
    }
}

在这里插入图片描述

states与transitions

Item的两个重要属性：states与transitions

状态机states

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
         id: root
         width: 100; height: 100
         color: "blue"

         state: "normal"

         states: [
             State {
                 name: "red_color"
                 PropertyChanges { target: root; color: "red"; width: 200 }
             },
             State {
                 name: "blue_color"
                 PropertyChanges { target: root; color: "blue"; height: 200 }
             },
             State {
                 name: "normal"
                 PropertyChanges { target: root; color: "black"; height: 200; width: 200 }
             }
         ]

         MouseArea {
             anchors.fill: parent
             onPressed: {
                 root.state = "red_color"
             }
             onReleased: {
                 root.state = "blue_color"
             }
         }
     }
}

transitions

  1. 第一种方法：直接属性动画

点击控件产生渐变效果

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
         id: flashingblob
         width: 75; height: 75
         color: "blue"
         opacity: 1.0

         MouseArea {
             anchors.fill: parent
             onClicked: {
                 animateColor.start()
                 animateOpacity.start()
             }
         }

         PropertyAnimation {
             id: animateColor
             target: flashingblob
             properties: "color"
             to: "green"
             duration: 1000   //持续时间（ms）
         }

         NumberAnimation {
             id: animateOpacity
             target: flashingblob
             properties: "opacity"
             from: 0.5
             to: 1.0
             duration: 1000   //持续时间（ms）
        }
     }
}

点击控件产生伸长效果

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
         id: flashingblob
         width: 75; height: 75
         color: "blue"
         opacity: 1.0

         MouseArea {
             anchors.fill: parent
             onClicked: {
                 animateOpacity.start()
             }
         }

         NumberAnimation {
             id: animateOpacity
             target: flashingblob
             properties: "width"
             from: 75
             to: 150
             duration: 3000   //持续时间（ms）
        }
     }
}
  1. 第二种方法：使用预定义的目标与属性
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
        id: rect
        width: 100; height: 100
        color: "red"

        PropertyAnimation on x { //修改当前控件的位置
            to: 100
            duration: 1000
        }

        PropertyAnimation on y {
            to: 100
            duration: 1000
        }
    }
}

还可以定义动画的执行顺序

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
        width: 100; height: 100
        color: "red"

        SequentialAnimation on color {
            ColorAnimation { to: "yellow"; duration: 1000 }
            ColorAnimation { to: "blue"; duration: 1000 }
        }
    }
}
  1. 第三种：在状态改变的时候做动画
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
         width: 75; height: 75
         id: button
         state: "RELEASED"

         MouseArea {
             anchors.fill: parent
             onPressed: button.state = "PRESSED"
             onReleased: button.state = "RELEASED"
         }

         states: [
             State {
                 name: "PRESSED"
                 PropertyChanges { target: button; color: "lightblue"}
             },
             State {
                 name: "RELEASED"
                 PropertyChanges { target: button; color: "lightsteelblue"}
             }
         ]

         transitions: [
             Transition {
                 from: "PRESSED"
                 to: "RELEASED"
                 ColorAnimation { target: button; duration: 1000 }
             },
             Transition {
                 from: "RELEASED"
                 to: "PRESSED"
                 ColorAnimation { target: button; duration: 1000 }
             }
         ]
     }
}
  1. 第四种：预定好行为
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
        width: 75; height: 75; radius: width
        id: ball
        color: "salmon"

        MouseArea {
            anchors.fill: parent
            onClicked: {
                ball.x += 50
                ball.y += 50
            }
        }

        Behavior on x {
            NumberAnimation {
                id: bouncebehavior
                easing {
                    type: Easing.OutElastic
                    amplitude: 1.0
                    period: 0.5
                }
            }
        }

        Behavior on y {
            animation: bouncebehavior
        }

        Behavior {
            ColorAnimation { target: ball; duration: 100 }
        }
    }
}

Component和Loader

qml中window组件也是一个Component

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Component.onCompleted: {
        console.log("onCompleted", width, height, color)
    }

    Component.onDestruction: {
        console.log("onDestruction")
    }
}

Component与Loader配合使用加载控件，在加载控件完成后想对控件进行修改，可使用loader.item属性对控件进行修改

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Button {
        id: btn
        x: 200; y:0
        width: 50; height: 50
        onClicked: {
            //loader.sourceComponent = null
            loader.item.width = 50
            loader.item.height = 50
            loader.item.color = "blue"
            console.log("onClicked")
        }
    }

    Component {
        id: com
        Rectangle {
            width: 100; height: 100
            color: "red"
        }
    }

    Loader {
        id: loader
        asynchronous: true     //异步加载
        sourceComponent: com
        source: "./MyRectangle.qml"
        onStatusChanged: {
            console.log("status: ", loader.status)
        }
    }
}

加载图片

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Component {
        id: com
        Image {
            id: img
            source: "./asset/image.png"
        }
    }

    Loader {
        id: loader
        asynchronous: true
        sourceComponent: com
        source: "./MyRectangle.qml"
        onStatusChanged: {
            console.log("status: ", loader.status)
        }
    }
}

在这里插入图片描述
加载动图

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Component {
        id: com
        AnimatedImage {
            id: img
            source: "/asset/test.gif"
            width: 100
            height: 100
        }
    }

    Loader {
        id: loader
        asynchronous: true
        sourceComponent: com
        source: "./MyRectangle.qml"
        onStatusChanged: {
            console.log("status: ", loader.status)
        }
    }
}

MouseArea组件

MouseArea也是继承自Item

  • acceptedButtons属性
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    MouseArea {
        id: mouseArea
        width: 100
        height: 100
        acceptedButtons: Qt.LeftButton | Qt.RightButton //支持左键和右键
        Rectangle {
            anchors.fill: parent
            color: "green"
        }
        onClicked: {
            console.log("onClicked")
        }
        onReleased: {
            console.log("onReleased")
        }
        onPressed: {
            var ret = pressedButtons & Qt.LeftButton
            var ret2 = pressedButtons & Qt.RightButton
            console.log(ret ? "left" : ret2 ? "right" : "other")
            console.log("onPressed")
        }
    }
}
  • containsMouse属性、ContainsPress属性
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    MouseArea {
        id: mouseArea
        width: 100
        height: 100
        acceptedButtons: Qt.LeftButton | Qt.RightButton //支持左键和右键
        hoverEnabled: true    
        cursorShape: Qt.CrossCursor   //十字光标
        Rectangle {
            anchors.fill: parent
            color: "green"
        }
        onClicked: {
            console.log("onClicked")
        }

        onHoveredChanged: {
            console.log("onHoveredChanged")
        }

        onContainsMouseChanged: {
            console.log("onContainsMouseChanged", containsMouse)
        }

        onContainsPressChanged: {
            console.log("onContainsPressed", containsPress)
        }
    }
}
  • drag属性

拖动控件移动

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
        id: container
        width: 600; height: 200

        Rectangle {
            id: rect
            width: 50; height: 50
            color: "red"
            opacity: (600.0 - rect.x) / 600

            MouseArea {
                anchors.fill: parent
                drag.target: rect
                drag.axis: Drag.XAxis
                drag.minimumX: 0
                drag.maximumX: container.width - rect.width
            }
        }
    }
}

连同子控件一起移动，由drag.filterChildren所控制

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
        width: 480
        height: 320
        Rectangle {
            x: 30; y: 30
            width: 300; height: 240
            color: "lightsteelblue"

            MouseArea {
                anchors.fill: parent
                drag.target: parent;
                drag.axis: "XAxis"
                drag.minimumX: 30
                drag.maximumX: 150
                drag.filterChildren: true

                Rectangle {
                    color: "yellow"
                    x: 50; y : 50
                    width: 100; height: 100
                    MouseArea {
                        anchors.fill: parent
                        onClicked: console.log("Clicked")
                    }
                }
            }
        }
    }
}

Button组件

Button控件继承自AbstractButton，AbstractButton继承自Control，Control继承自Item

  • autoExclusive属性
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Button {
        id: btn1
        width: 50
        height: 50
        checkable: true
        autoExclusive: true
    }

    Button {
        id: btn2
        x: 60
        width: 50
        height: 50
        checkable: true
        autoExclusive: true
    }

    Button {
        id: btn3
        x: 120
        width: 50
        height: 50
        checkable: true
        autoExclusive: true
    }
}

同一时间只有一个按钮处于checked状态

在这里插入图片描述

  • autoRepeat、autoRepeatDelay、autoRepeatInterval
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Button {
        id: btn1
        width: 50
        height: 50

        autoRepeat: true
        autoRepeatDelay: 3000 //控制第一次重复触发的时间
        autoRepeatInterval: 1000 //重复触发的时间间隔

        onClicked: {
            console.log("onClicked")
        }
        onReleased: {
            console.log("onReleased")
        }
        onPressed: {
            console.log("onPressed")
        }
    }
}
  • icon属性
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Button {
        id: btn1
        width: 50
        height: 50

        icon.source: "/asset/8666542_save_icon.png"
        icon.color: "black"
    }
}

在这里插入图片描述

  • text属性
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Button {
        id: btn1
        width: 50
        height: 20

        text: "btn"
    }
}

在这里插入图片描述

  • background属性
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Button {
        id: btn1
        width: 50
        height: 20

        background: Rectangle {
            anchors.fill: btn
            color: "blue"
        }
    }
}

在这里插入图片描述

Property的使用

MyRectangle.qml

import QtQuick 2.15

Rectangle {
    id: borderRect
    width: 200
    height: 200
    color: "red"

    property int myTop: 0
    property int myBottom: 0
    property real myReal: 0.0
    property string myString: "black"
    property color myColor: "red"
    property url myUrl: "/asset/test.jpg"

    required property Component myCom    //外界一定设置才行
    property Rectangle myRect

    property var myVar: "0.0"
    property list<Rectangle> myList

    readonly property int rectWidth: width //外界不可修改
    property alias newInnerRect: innerRect //给子控件取别名

    Rectangle {
        id: innerRect
        Loader {
            id: loader
            sourceComponent: myCom
        }
        color: "blue"
        anchors.fill: parent
        anchors.topMargin: myTop
        anchors.bottomMargin: myBottom
        anchors.leftMargin: 5
        anchors.rightMargin: 5
    }
}

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Component {
        id: com
        Button {
            width: 50
            height: 50
        }
    }

    MyRectangle {
        id: rect
        myCom: com
        Component.onCompleted: {
            newInnerRect.color = "green"
            console.log(rectWidth)
        }
    }
}

在这里插入图片描述

CheckBox控件

CheckBox继承自AbstractButton

  • tristate 属性
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Column {
        CheckBox {
            checked: true
            tristate: true
            text: qsTr("First")
            onCheckStateChanged: {
                console.log("checkState: ", checkState)
            }
        }
        CheckBox {
            text: qsTr("Second")
        }
        CheckBox {
            checked: true
            text: qsTr("Third")
        }
    }
}

checkBox控件无法用autoExclusive属性实现单选框，但可用ButtonGroup来实现

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    ButtonGroup {
        id: childGroup
        exclusive: true
        buttons: column.children
    }

    Column {
        id: column
        CheckBox {
            checked: true
            text: qsTr("First")

        }
        CheckBox {
            text: qsTr("Second")
        }
        CheckBox {
            checked: true
            text: qsTr("Third")
        }
    }
}

在这里插入图片描述

以下示例说明了如何将子项的组合检查状态绑定到父复选框的检查状态

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Column {
        ButtonGroup {
            id: childGroup
            exclusive: false
            checkState: parentBox.checkState
        }

        CheckBox {
            id: parentBox
            text: qsTr("Parent")
            checkState: childGroup.checkState
        }

        CheckBox {
            checked: true
            text: qsTr("Child 1")
            leftPadding: indicator.width
            ButtonGroup.group: childGroup
        }

        CheckBox {
            text: qsTr("Child 2")
            leftPadding: indicator.width
            ButtonGroup.group: childGroup
        }
    }
}

在这里插入图片描述

  • nextCheckState
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    CheckBox {
        tristate: true

        nextCheckState: function() {
            if (checkState === Qt.Checked)
                return Qt.Unchecked
            else
                return Qt.Checked

        }
    }
}

DelayButton控件

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    DelayButton {
        width: 150
        height: 50
        delay: 3000
        onPressedChanged: {
            console.log(progress)
        }
    }
}

在这里插入图片描述

RadioButton控件

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Column {
        RadioButton {
            checked: true
            text: qsTr("First")
        }
        RadioButton {
            text: qsTr("Second")
        }
        RadioButton {
            text: qsTr("Third")
        }
    }
}

RadioButton控件具有自动排他性

在这里插入图片描述

Switch控件

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    ButtonGroup {
        id: btngrp
        exclusive: true
        buttons: column.children
    }

    Column {
         id: column
         Switch {
             text: qsTr("Wi-Fi")
             onPositionChanged: {
                 console.log("pos: ",position)
             }
             onVisualPositionChanged: {
                 console.log("vis pos: ", visualPosition)
             }
         }
         Switch {
             text: qsTr("Bluetooth")
         }
     }
}

在这里插入图片描述

TabButton控件

一般用作切换界面的按钮

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    TabBar {
         TabButton {
             text: qsTr("Home")
         }
         TabButton {
             text: qsTr("Discover")
             //width: 80
         }
         TabButton {
             text: qsTr("Activity")
         }
     }
}

在这里插入图片描述

Button扩展

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Button {
        id: control
        text: qsTr("Button")
        contentItem: Rectangle {
            color: "transparent" //默认颜色是白色
            Text {
                text: control.text
                font.pixelSize: 18
                font.bold: true
                font.italic: true
                x: 28; y: 5
            }
            Image {
                id: img
                source: "/asset/rocket.png"
                width: 25
                height: 25
            }
        }
    }
}

在这里插入图片描述

Text控件

  • elide属性
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
        width: 80
        height: 30
        anchors.centerIn: parent
        border.color: "red"
        Text {
            id: txt
            elide: Text.ElideMiddle
            anchors.fill: parent
            text: qsTr("https://example.com/sjdflk/shdlsj/sdflksjf")
        }
    }
}

在这里插入图片描述

  • font属性
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")


    Text {
        id: txt
        text: qsTr("https://example.com\nhttps://\nsss.com")
        font.bold: true //粗体
        font.family: "Courier New"  //字体
        font.italic: true  //斜体
        font.letterSpacing: 3 //字体间距离
        //font.pixelSize: 36  //字体 像素为单位
        font.pointSize: 20  //字体 磅
        font.underline: true
        lineHeight: 2 //行间距

        Component.onCompleted: {
            console.log("lineCount: ", lineCount)
        }
    }
}

在这里插入图片描述

  • textFormat属性
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")


    Column {
        Text {
            font.pointSize: 24
            text: "<b>Hello</b> <i>World!</i>"
        }
        Text {
            font.pointSize: 24
            textFormat: Text.RichText
            text: "<b>Hello</b> <i>World!</i>"
        }
        Text {
            font.pointSize: 24
            textFormat: Text.PlainText
            text: "<b>Hello</b> <i>World!</i>"
        }
        Text {
            font.pointSize: 24
            textFormat: Text.MarkdownText
            text: "**Hello** *World!*"
        }
    }
}

在这里插入图片描述

  • linkActivated信号
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")


    Text {
            textFormat: Text.RichText
            text: "See the <a href=\"http://qt-project.org\">Qt Project website</a>."

            MouseArea {
                anchors.fill:  parent
                cursorShape: Qt.PointingHandCursor
                hoverEnabled: true
                
                onClicked: {
                    
                }
            }
 
            //将被MouseArea拦截失效
            onLinkActivated: {
                console.log(link + " link activated")
            }

            onLinkHovered: {
                console.log("hover", link)
            }

            onHoveredLinkChanged: {
                console.log("hover link changed: ", hoveredLink)
            }
    }
}

在这里插入图片描述

Popup和Overlay

在这里插入图片描述

当Popup为子控件时，且设置visible为true时，仍然可以显示

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
        width: 100; height: 100
        color: "red"
        visible: false

        Popup {
            width: 50; height: 50
            visible: true
        }
    }
}

在这里插入图片描述

Popup的z顺序是个例外

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Rectangle {
        width: 100; height: 100
        color: "red"
        visible: true
    }

    //Popup的z顺序为例外
    Popup {
        width: 50; height: 50
        x: 20; y: 20
        //color: "blue"
        visible: true
        z: -1
    }
}

在这里插入图片描述

  • closePolicy属性：窗口关闭逻辑

MyPopup.qml

import QtQuick 2.15
import QtQuick.Controls 2.5

Popup {
    id: popup
    x: 100
    y: 100
    width: 200
    height: 300
    visible: true
    modal: true
    closePolicy: Popup.NoAutoClose
}

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Popup {
        width: 50; height: 50
        x: 20; y: 20
        //color: "blue"
        visible: true
        z: -1
    }

    MyPopup {

    }
}

如此，按下Esc或者在Popup控件周围按下不会让控件消失

在这里插入图片描述

  • modal模态对话框属性
  • dim：配合modal使用
  • enter、exit属性
import QtQuick 2.15
import QtQuick.Controls 2.5

Popup {
    id: popup
    x: 100
    y: 100
    width: 200
    height: 300
    visible: true
    modal: true
    dim: true
    //closePolicy: Popup.NoAutoClose

    enter: Transition { //打开的时候
             NumberAnimation { property: "opacity"; from: 0.0; to: 1.0 }
    }

    exit: Transition { //推出的时候
             NumberAnimation { property: "opacity"; from: 1.0; to: 0.0 }
    }
}
  • contentItem属性
import QtQuick 2.15
import QtQuick.Controls 2.5

Popup {
    id: popup
    x: 100; y: 100
    width: 400; height: 300
    visible: true
    modal: true
    dim: true
    //closePolicy: Popup.NoAutoClose

    enter: Transition { //打开的时候
             NumberAnimation { property: "opacity"; from: 0.0; to: 1.0 }
    }

    exit: Transition { //推出的时候
             NumberAnimation { property: "opacity"; from: 1.0; to: 0.0 }
    }

    contentItem: Rectangle {
        anchors.fill: parent
        Text {
            id: txt
            text: qsTr("Message Box popup")
        }
    }

    Button {
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 30
        anchors.right: parent.right
        anchors.rightMargin: 30
        text: "cancel"
    }

    Button {
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 30
        anchors.right: parent.right
        anchors.rightMargin: 150
        text: "ok"
    }
}

在这里插入图片描述

  • overlay属性
import QtQuick 2.15
import QtQuick.Controls 2.5

Popup {
    id: popup
    x: 100; y: 100
    width: 400; height: 300
    visible: true
    modal: true
    dim: true
    //closePolicy: Popup.NoAutoClose

    enter: Transition { //打开的时候
             NumberAnimation { property: "opacity"; from: 0.0; to: 1.0 }
    }

    exit: Transition { //推出的时候
             NumberAnimation { property: "opacity"; from: 1.0; to: 0.0 }
    }

    contentItem: Rectangle {
        anchors.fill: parent
        Text {
            id: txt
            text: qsTr("Message Box popup")
        }
    }

    Button {
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 30
        anchors.right: parent.right
        anchors.rightMargin: 30
        text: "cancel"
    }

    Button {
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 30
        anchors.right: parent.right
        anchors.rightMargin: 150
        text: "ok"
    }

    Overlay.modal: Rectangle {
        color: "#33000000"
    }

    Overlay.modeless: Rectangle {
        color: "blue"
    }
}

Reapter

model属性

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Row {
        Repeater {
            model: 3 //模型， 数字表示有几个控件
            Rectangle {
                width: 100; height: 40
                border.width: 1
                color: "yellow"
            }
        }
    }
}

在这里插入图片描述

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("my qml")

    Repeater {
        model: ["Button", "Rectangle", "MouseArea"]

        Button {
            y: index * 50
            width: 100; height: 40
            text: modelData
        }
    }
}

在这里插入图片描述

ListView控件

MyListView.qml

import QtQuick 2.15
import QtQuick.Controls 2.5

ListView {
    width: 180; height: 200

    model: ['Button', 'Rectangle', "List", "CheckBox"]        //数字， 控制所有数据
    spacing: 10

    delegate: Button { //控制每一项数据如何绘制
        text: modelData
    }
}

在这里插入图片描述
还可以用ListModel这么搞

import QtQuick 2.15
import QtQuick.Controls 2.5

ListView {
    width: 180; height: 200

    model:  ListModel {
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
    }//控制所有数据
    spacing: 10

    delegate: Button { //控制每一项数据如何绘制
        text: name + ": " + number
    }
}

在这里插入图片描述

  • highlight属性
import QtQuick 2.5
import QtQuick.Controls 2.5

ListView {
    id: list
    width: 180; height: 200

    model:  ListModel {
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
    }//控制所有数据
    spacing: 15

    highlight: Rectangle {
        color: "lightsteelblue"
        //radius: 5
    }

    delegate: Rectangle { //控制每一项数据如何绘制
        width: 80
        height: 15
        color: "transparent"

        Text {
            id: txt
            text: name
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                currentIndex = index
                console.log(index)
            }
        }
    }
}

在这里插入图片描述

  • head和foot
import QtQuick 2.5
import QtQuick.Controls 2.5

Rectangle {
    width: 400
    height: 200

    border.color: "black"
    anchors.centerIn: parent

    ListView {
        id: list
        width: 180; height: 200

        model:  ListModel {
            ListElement {
                name: "Bill Smith"
                number: "555 3264"
            }
            ListElement {
                name: "John Brown"
                number: "555 8426"
            }
            ListElement {
                name: "Sam Wise"
                number: "555 0473"
            }
        }//控制所有数据

        header: Rectangle {
            width: 180
            height: 20

            color: "red"
        }

        footer: Rectangle {
            width: 180
            height: 20

            color: "blue"
        }

        spacing: 15

        highlight: Rectangle {
            color: "lightsteelblue"
            //radius: 5
        }

        delegate: Rectangle { //控制每一项数据如何绘制
            width: 80
            height: 15
            color: "transparent"

            Text {
                id: txt
                text: name
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    list.currentIndex = index
                    console.log(index)
                }
            }
        }
    }
}

在这里插入图片描述

  • section
import QtQuick 2.5
import QtQuick.Controls 2.5

Rectangle {
    width: 400
    height: 200

    border.color: "black"
    anchors.centerIn: parent

    ListView {
        id: list
        width: 180; height: 200

        Component {
            id: sectionHeading
            Rectangle {
                width: 400
                height: childrenRect.height
                color: "blue"

                required property string section

                Text {
                    text: parent.section
                    font.bold: true
                    font.pixelSize: 20
                }
            }
        }

        model:  ListModel {
            ListElement {
                name: "Bill Smith"
                number: "555 3264"
                size: "s"
            }
            ListElement {
                name: "John Brown"
                number: "555 8426"
                size: "l"
            }
            ListElement {
                name: "Sam Wise"
                number: "555 0473"
                size: "xl"
            }
        }//控制所有数据

//        header: Rectangle {
//            width: 180
//            height: 20

//            color: "red"
//        }

//        footer: Rectangle {
//            width: 180
//            height: 20

//            color: "blue"
//        }

        spacing: 15

        highlight: Rectangle {
            color: "lightsteelblue"
            //radius: 5
        }

        delegate: Rectangle { //控制每一项数据如何绘制
            width: 80
            height: 15
            color: "transparent"

            Text {
                id: txt
                text: name
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    list.currentIndex = index
                    console.log(index)
                }
            }
        }

        section.property: "size"
        section.criteria: ViewSection.FullString
        section.delegate: sectionHeading  //每一个property如何绘制
    }
}

在这里插入图片描述

Combox控件

Combox控件继承自Control，Control继承自Item

MyComboBox.qml

import QtQuick 2.5
import QtQuick.Controls 2.5

ComboBox {
    editable: true
    model: ListModel {
        id: model
        ListElement { text: "Banana" }
        ListElement { text: "Apple" }
        ListElement { text: "Coconut" }
    }
    onAccepted: {
        if (find(editText) === -1)
            model.append({text: editText})
    }
}

在这里插入图片描述

  • currentText、currentValue
import QtQuick 2.5
import QtQuick.Controls 2.15

ComboBox {
    textRole: "text"
    valueRole: "name"
    displayText: currentText + " " + currentValue

    model: [
        { value: 100, text: qsTr("No modifier"), name: "lindong" },
        { value: 200, text: qsTr("Shift") , name: "xiaoyan" },
        { value: 300, text: qsTr("Control"), name: "muchen" }
    ]

    onCurrentTextChanged: {
        console.log("text: ", currentText)
    }

    onCurrentValueChanged: {
        console.log("value: ", currentValue)
    }
}

在这里插入图片描述

  • validator

此属性保存可编辑组合框的输入文本验证器。设置验证器后，文本字段将仅接受使文本属性处于中间状态的输入。仅当按下 Return 或 Enter 键时文本处于可接受状态时，才会发出接受的信号。

import QtQuick 2.5
import QtQuick.Controls 2.15

ComboBox {
    model: 10
    editable: true
//    validator: IntValidator {
//        top: 9
//        bottom: 0
//    }

    validator: RegExpValidator {
        regExp: /[0-9A-F]+/
    }

    onAcceptableInputChanged: {  //当前有没有匹配validator验证器
        console.log(acceptableInput)
    }
}

自定义ComboBox

  • indicator

此属性保存放置指示器项。

import QtQuick 2.12
import QtQuick.Controls 2.12

ComboBox {
    id: control
    model: ["First", "Second", "Third"]

    delegate: ItemDelegate { //针对model中 每一项的具体绘制
        width: control.width
        contentItem: Text {
            text: modelData
            color: "red"
            font: control.font
            elide: Text.ElideRight
            verticalAlignment: Text.AlignVCenter
        }
        highlighted: control.highlightedIndex === index
    }

    indicator: Canvas {
        id: canvas
        x: control.width - width - control.rightPadding
        y: control.topPadding + (control.availableHeight - height) / 2
        width: 12
        height: 8
        contextType: "2d"

        Connections {
            target: control
            function onPressedChanged() { canvas.requestPaint(); }
        }

        onPaint: {
            context.reset();
            context.moveTo(0, 0);
            context.lineTo(width, 0);
            context.lineTo(width / 2, height);
            context.closePath();
            context.fillStyle = control.pressed ? "#17a81a" : "#21be2b";
            context.fill();
        }
    }

    contentItem: Text { //控件显示内容
        leftPadding: 0
        rightPadding: control.indicator.width + control.spacing

        text: control.displayText
        font: control.font
        color: control.pressed ? "red" : "blue"
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {  //控件背景
        implicitWidth: 120
        implicitHeight: 40
        border.color: control.pressed ? "#17a81a" : "#21be2b"
        border.width: control.visualFocus ? 2 : 1
        radius: 3
    }

    popup: Popup {  //绘制整个下拉控件
        y: control.height - 1
        width: control.width
        implicitHeight: contentItem.implicitHeight
        padding: 1

        contentItem: ListView {
            clip: true
            implicitHeight: contentHeight
            model: control.popup.visible ? control.delegateModel : null
            currentIndex: control.highlightedIndex

            ScrollIndicator.vertical: ScrollIndicator { }
        }

        background: Rectangle {
            border.color: "gray"
            radius: 2
        }
    }
}

StackView控件

可用于管理具有多个页面的应用程序

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

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

     StackView {
         id: stack
         initialItem: mainView
         anchors.fill: parent
     }

     Component {
         id: mainView

         Row {
             spacing: 10

             Button {
                 text: "Push"
                 onClicked: stack.push(mainView)
             }
             Button {
                 text: "Pop"
                 enabled: stack.depth > 1
                 onClicked: stack.pop()

             }
             Text {
                 text: stack.depth
             }
         }
     }
 }

在这里插入图片描述

自定义Model

ListView显示数据必须构造相应的模型类，继承自QAbstractListModel

mylistmodel.h

#ifndef MYLISTMODEL_H
#define MYLISTMODEL_H

#include <QAbstractListModel>
#include <QJsonObject>
#include <QJsonArray>
#include <QJsonDocument>
#include <QJsonValue>

class MyListModel : public QAbstractListModel
{
    Q_OBJECT

public:
    enum MyRoleName {
        Name = Qt::DisplayRole + 1,
    };

    explicit MyListModel(QObject *parent = nullptr);
    static MyListModel* instance();

    // Basic functionality:
    int rowCount(const QModelIndex &parent = QModelIndex()) const override;
    QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override;
    QHash<int, QByteArray> roleNames() const override;

private:

    QList<QString> m_data;
};

#endif // MYLISTMODEL_H

mylistmodel.cpp

#include "mylistmodel.h"

MyListModel::MyListModel(QObject *parent)
    : QAbstractListModel(parent)
{
    m_data.append("韩立 200");
    m_data.append("银月 666");
    m_data.append("紫灵 111");
}

MyListModel *MyListModel::instance()
{
    static MyListModel* obj = new MyListModel;
    return obj;
}

int MyListModel::rowCount(const QModelIndex &parent) const
{
    // For list models only the root node (an invalid parent) should return the list's size. For all
    // other (valid) parents, rowCount() should return 0 so that it does not become a tree model.
    if (parent.isValid())
        return 0;

    return m_data.count();
    // FIXME: Implement me!
}

QVariant MyListModel::data(const QModelIndex &index, int role) const
{
    if (!index.isValid())
        return QVariant();

    if (role == MyRoleName::Name) {
        return m_data[index.row()];
    }

    // FIXME: Implement me!
    return QVariant();
}

QHash<int, QByteArray> MyListModel::roleNames() const
{
    QHash<int, QByteArray> roles;
    roles.insert(MyRoleName::Name, "name");
    return roles;
}

main.cpp中注册模型类

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "mylistmodel.h"

int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.rootContext()->setContextProperty("MyListModel", MyListModel::instance());
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
        &app, [url](QObject *obj, const QUrl &objUrl) {
            if (!obj && url == objUrl)
                QCoreApplication::exit(-1);
        }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

qml当中用ListView显示

import QtQuick 2.15
import QtQuick.Window 2.15

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

    ListView {
        width: 200
        height: 300

        model: MyListModel

        delegate: Text {
            id: txt;
            text: name
        }
    }
}

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1073808.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

浏览器安装vue调试工具

浏览器安装vue调试工具

下载扩展程序文件 下载链接&#xff1a;链接: 下载连接网盘地址&#xff0c; 提取码: 0u46&#xff0c;里面有两个crx,一个适用于vue2&#xff0c;一个适用于vue3&#xff0c;可根据vue版本选择不同的调试工具 crx安装扩展程序不成功&#xff0c;将文件改为rar文件然后解压 安装…
阅读更多...
Jenkins 构建时动态获取参数

Jenkins 构建时动态获取参数

文章目录 问题简介Groovy 脚本配置进阶 问题 在做jenkins项目时&#xff0c;有些参数不是固定写死的&#xff0c;而是动态变化的&#xff0c;这时我们可以用 Active Choices 插件来远程调用参数 问题解决方案&#xff1a;执行构建前使用Groovy Scrip调用本地脚本&#xff0c;…
阅读更多...
Wlan——无线反制理论与配置讲解

Wlan——无线反制理论与配置讲解

目录 非法设备基本概念 非法设备的分类 如何识别非法设备的类型 非法设备判断流程 反制AP的工作模式 AP对于非法设备的检测模式 AP对于非法设备的反制模式 反制设备的工作原理 反制设备如何获取非法设备的信息 反制设备对非法设备反制的原理 如何通过空口抓包判断是…
阅读更多...
iframe框架token失效重新登陆问题

iframe框架token失效重新登陆问题

在登录信息过期之后&#xff0c;或者也就是token过期后&#xff0c;要登出&#xff0c;跳转到登录页面重新登录来获取token等信息。 这时如果你用的是iframe框架的话&#xff0c;就会出现登录界面是嵌套在框架里面的情况&#xff0c;或者出现下图所示报错情况。 出现这种情况…
阅读更多...
PowerBI 一些基础功能

PowerBI 一些基础功能

1、PowerBI创建日期表 1.1、Power BI 日期表 - 知乎日期是做数据分析的时候使用最频繁的分析维度&#xff0c;一般建议建立单独的日期维度表&#xff0c;并与事实表的日期字段建立连接。 建立日期维度表可通过DAX函数的方式进行&#xff1a; 日期表 CALENDAR(DATE("2023&…
阅读更多...
基于Springboot实现疫情网课管理系统项目【项目源码+论文说明】

基于Springboot实现疫情网课管理系统项目【项目源码+论文说明】

基于Springboot实现疫情网课管理系统演示 摘要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff1b;对于疫情网课管理系统当然也不能排除在外&#xff0c;随着网络技术的不断成熟&#xff0c;带动了疫情…
阅读更多...
当我们谈论量化时，我们在谈论什么？量化投资常见策略有哪些？| 融券T0和高频交易详解【邢不行】

当我们谈论量化时，我们在谈论什么？量化投资常见策略有哪些？| 融券T0和高频交易详解【邢不行】

最近关于量化的争议不断&#xff0c;很多人甚至建议取缔量化。 部分人认为量化以高频交易配合融券变相实现T0&#xff0c;赚走了市场所有的钱&#xff0c;有失公正。 高频交易大家都听过&#xff0c;即凭借程序在几秒甚至几毫秒内完成一笔交易&#xff0c;有人认为这对还在盯盘…
阅读更多...
ThreadLocal线程变量使用浅解

ThreadLocal线程变量使用浅解

一、概述    ThreadLocal一般称为线程本地变量&#xff0c;它是一种特殊的线程绑定机制&#xff0c;将变量与线程绑定在一起&#xff0c;为每一个线程维护一个独立的变量副本。通过ThreadLocal可以将对象的可见范围限制在同一个线程内&#xff0c; 在实际多线程操作的时候&a…
阅读更多...
探索8个顶级的绘图工具

探索8个顶级的绘图工具

在数字时代&#xff0c;绘画已经成为一种常见的表达方式&#xff0c;不仅广泛应用于艺术创作领域&#xff0c;而且在教育、设计和商业领域发挥着重要作用。随着技术的进步&#xff0c;越来越多的计算机绘图软件出现&#xff0c;为用户提供了更多的选择。本文将推荐8个计算机绘图…
阅读更多...
Linux文件与目录的增删改查

Linux文件与目录的增删改查

一、增 1、mkdir命令 作用： 创建一个新目录。格式： mkdir [选项] 要创建的目录 常用参数： -p：创建目录结构中指定的每一个目录，如果目录不存在则创建，如果目录已存在也不会被覆盖。用法示例： 1、mkdir directory：创建单个目录 这个命令会在当前目录下创建一个名为…
阅读更多...
ELK 处理 SpringCloud 日志

ELK 处理 SpringCloud 日志

在排查线上异常的过程中&#xff0c;查询日志总是必不可缺的一部分。现今大多采用的微服务架构&#xff0c;日志被分散在不同的机器上&#xff0c;使得日志的查询变得异常困难。工欲善其事&#xff0c;必先利其器。如果此时有一个统一的实时日志分析平台&#xff0c;那可谓是雪…
阅读更多...
【python】exec()内置函数释义

【python】exec()内置函数释义

【python】exec内置函数释义 官方释义样例注意事项拓展感谢及参考博文 官方释义 官方Python API文档镇楼 exec(object, globalsNone, localsNone, /, *, closureNone) 支持动态执行 Python 代码&#xff0c; object 必须是字符串或者代码对象。 需要特别注意以下两点&#xff…
阅读更多...
Multi Modal Smart Diagnosis of Pulmonary Diseases

Multi Modal Smart Diagnosis of Pulmonary Diseases

方法 体会 作者图2的字太小&#xff0c;每个图都用一样形式的block&#xff0c;流程图乱画&#xff0c;且不给代码&#xff0c;看来InCACCT不怎么样
阅读更多...
Spring 复习笔记

Spring 复习笔记

目录 第一步存 Bean第二步获取并使用 Bean依赖查找的方式ApplicationContext vs BeanFactory 更简单的存储 Bean1. 配合五大类注解使用2. 方法上添加注解 Bean 更简单的获取 Bean Spring IoC 容器管理的资源就是对象&#xff0c;这个对象也叫做 Bean。Spring 作为一个 IoC 容器…
阅读更多...
VTable: 不只是高性能的多维数据分析表格

VTable: 不只是高性能的多维数据分析表格

VTable&#xff0c;面向多维分析与可视化的高性能表格组件 导读 VTable: 不只是高性能的多维数据分析表格&#xff0c;更是行列间创作的方格艺术家&#xff01; VTable是字节跳动开源可视化解决方案 VisActor 的组件之一。 在现代应用程序中&#xff0c;表格组件是不可或缺的…
阅读更多...
面试金典--面试题 17.21. 直方图的水量（不困难的困难题）

面试金典--面试题 17.21. 直方图的水量（不困难的困难题）

文章目录 题目描述思路分析完整代码 题目描述 给定一个直方图(也称柱状图)&#xff0c;假设有人从上面源源不断地倒水&#xff0c;最后直方图能存多少水量?直方图的宽度为 1。 上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表示的直方图&#xff0c;在这种情况下&#xff0c;可以接…
阅读更多...
适用于医美行业的微信管理系统

适用于医美行业的微信管理系统

在当今这个数字化时代&#xff0c;微信已经成为人们日常生活中必不可少的社交工具之一。对于医美行业来说&#xff0c;微信也是一个极为重要的营销渠道。 医美行业面临的一些困境 ①门槛低&#xff0c;竞争大&#xff0c;需要进行大量营销&#xff0c;来走出红海 ②医美种类繁…
阅读更多...
第三章 栈、队列和数组

第三章 栈、队列和数组

第三章 栈、队列、数组 栈栈的基本概念栈的顺序实现栈的链接实现栈的简单应用和递归 队列队列的基本概念队列的顺序实现队列的链接实现 数组数组的逻辑结构和基本运算数组的存储结构矩阵的压缩存储 小试牛刀 栈和队列可以看作是特殊的线性表&#xff0c;是运算受限的线性表 栈 …
阅读更多...
Nmap扫描教程-01

Nmap扫描教程-01

Nmap扫描教程 SYN扫描操作及原理&#xff08;半连接扫描&#xff09; 1. 第一步打开wireshark选着你要监听网卡 2. 在kail中输入命令找到我们需要扫描主机的ip地址 arp-scan -l -I eth1 3. 在kail中输入命令进行SYN半连接扫描 nmap -sS -p80 --reason -vvv 172.30.1.128 -s…
阅读更多...
这是要被奖金给砸晕啊......

这是要被奖金给砸晕啊......

嗨咯&#xff0c;大家好&#xff0c;我是K同学啊&#xff01; 由于最近训练营中经常有同学问我&#xff0c;有哪些比较好的知识变现且可以提升自己专业水平的渠道&#xff0c;这几天整理出了一个个人认为还不错的关于深度学习方面的大赛&#xff08;就奖金比较多而已&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023