MacOS下Qt+qml+Android开发系列：3、内容超过屏幕长度时滚动显示

一、前言

很多时候内容会超过一屏的高度，这个时候可以采用ScrollView、ListView来使得内容滚动显示，我们来问一下trae，直接介绍了三种，包含我上面说的两种方式：

二、滚动显示

1、ScrollView 常见属性

1.1、`contentWidth` 和 `contentHeight`

设置滚动内容区域的宽度和高度。通常设置为内容的实际尺寸。

ScrollView {
    contentWidth: parent.width
    contentHeight: column.height
}

1.2、`flickableDirection`

控制滚动方向，可选值：

• Flickable.AutoFlickDirection（自动）
• Flickable.HorizontalFlick（水平）
• Flickable.VerticalFlick（垂直）
• Flickable.HorizontalAndVerticalFlick（水平和垂直）

ScrollView {
    flickableDirection: Flickable.VerticalFlick
}

1.3、`ScrollBar.horizontal` 和 `ScrollBar.vertical`

自定义水平和垂直滚动条的样式和行为。

ScrollView {
    ScrollBar.horizontal.policy: ScrollBar.AlwaysOn
    ScrollBar.vertical.policy: ScrollBar.AsNeeded
}

1.4、`interactive`

控制是否允许用户交互滚动，默认为`true`。

ScrollView {
    interactive: true
}

1.5、`boundsBehavior`

控制滚动到边界时的行为，可选值：

• Flickable.StopAtBounds（停止）
• Flickable.DragAndOvershootBounds（允许拖拽超出边界）

ScrollView {
    boundsBehavior: Flickable.StopAtBounds
}

1.6、测试代码和效果

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

Window {
  width: 400
  height: 600
  visible: true
  title: "ScrollView 测试示例"

  ScrollView {
    anchors.fill: parent

    // 新版Qt中ScrollView直接包含contentItem，不需要单独设置contentWidth/Height
    Column {
      id: column
      width: parent.width
      spacing: 10

      Repeater {
        model: 20
        Rectangle {
          width: parent.width
          height: 50
          color: index % 2 ? "lightgray" : "white"
          Text {
            text: "项目 " + index
            anchors.centerIn: parent
          }
        }
      }
    }
  }
}

2、ListView 常见属性

2.1、`model`

设置数据模型，可以是数组、`ListModel`等。

ListView {
    model: ["Item 1", "Item 2", "Item 3"]
}

2.2、`delegate`

定义列表项的外观和行为。

ListView {
    delegate: Text {
        text: modelData
    }
}

2.3、`spacing`

设置列表项之间的间距。

ListView {
    spacing: 10
}

2.4、`orientation`

控制列表的排列方向，可选值：

• ListView.Horizontal（水平）
• ListView.Vertical（垂直）

ListView {
    orientation: ListView.Horizontal
}

2.5、`clip`

控制是否裁剪超出列表区域的内容，默认为`true`。

ListView {
    clip: true
}

这些属性可以帮助你更好地控制ScrollView和ListView的行为和外观，适应不同的应用场景。

2.6、测试代码和效果

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

Window {
width: 400
height: 600
visible: true
title: "ListView 示例"

ListView {
id: listView
anchors.fill: parent
spacing: 5
clip: true

    model: 50

    delegate: Rectangle {
      width: parent.width
      height: 20
      color: index % 2 ? "lightgray" : "white"

      Text {
        text: "listview项目 " + index
        anchors.centerIn: parent
        font.pixelSize: 16
      }

      MouseArea {
        anchors.fill: parent
        onClicked: {
          console.log("点击项:", index)
          listView.currentIndex = index
        }
      }
    }

    highlight: Rectangle {
      color: "lightblue"
      radius: 4
    }

    ScrollBar.vertical: ScrollBar {}

}
}

三、最后

接下来我们总结下如何使用qml画出折线图、曲线图，以及界面分层级显示。