☰

如何在 ListView 和其页脚之间添加一些填充？

tag-icon • tag-icon application-development qml
如何在 ListView 和其页脚之间添加一些填充？

考虑以下 QML 代码片段：

ListView {
    //...

    footer: Text {
        text: "Sample Text"
    }
}

这将直接在 ListView 底部显示文本“示例文本”。但是，列表中的最后一项和文本之间没有空格。

我该如何添加一些间距/填充？我尝试过设置anchors.top，anchors.topMargin但结果只是给我“在垂直锚点上检测到可能的锚点环”警告。似乎什么都不起作用。

答案1

我正在使用ContactModel.qmlSDK 中提供的例子。

要在页脚和最后一个列表元素之间添加一些间距，您可以为页脚创建一个专用组件，并在其中按照您想要的方式修改布局：

import QtQuick 2.0
import Ubuntu.Components 0.1

Item {
    width: 200
    height: 350

    ListView {
        width: 180; height: 200
        model: ContactModel {}
        delegate: Text {
            text: name + ": " + number
        }

        Component {
            id: myfooter
            Item {
                width: parent.width
                height: units.gu(3)
                Text {
                    anchors.bottom: parent.bottom
                    text: "Sample Text"
                }
            }
        }

        footer: myfooter
    }
}

结果：

在此处输入图片描述

答案2

我最终做的是创建一个Column并Rectangle在我想要出现在页脚的内容之前插入一个：

Rectangle {
    color: "transparent"
    width: parent.width
    height: units.gu(3)
}

答案3

要小心字体中的透明矩形，它们只是尚未在特定字体中分配，其他字体可能会显示特殊字符或装饰符号！

您是否尝试过显而易见的方法（转义换行符）

footer: Text {
    text: "\nSample Text"
}

答案4

您可以使用 的bottomMargin属性ListView在列表末尾添加额外空间。请注意，此属性是从 继承的Flickable。
但是，从用户体验的角度来看，让页脚看起来与其他常规项目一样似乎不是一个好主意（通常）。

相关内容