如何使用QML实现类似网页的多邮箱输入字段？

完全可以实现这类功能，不需要依赖TextArea，而是通过动态组件+布局容器的方式来实现，完美支持多行场景。以下是具体实现思路和代码示例：

核心思路 #

• 用WrapLayout作为主容器：它会自动处理组件的换行，无需手动计算位置，天生适配多行邮箱列表场景。
• 自定义EmailTag组件：用来承载已输入的邮箱地址，作为独立容器显示。
• 用TextField作为输入入口：放在容器末尾，用户输入邮箱后（比如按回车），将输入内容转为EmailTag组件，添加到容器中，再清空输入框。

代码实现 #

1. 自定义EmailTag组件 #

// EmailTag.qml
Rectangle {
    property string email: ""
    color: "#e0e0e0"
    radius: 4
    height: 24
    padding: 6
    Text {
        text: email
        anchors.centerIn: parent
        font.pixelSize: 14
    }
    // 可选：若需删除功能，可在此添加按钮并触发父组件移除当前标签
}

2. 主输入容器组件 #

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

Rectangle {
    width: 400
    height: 200
    color: "#ffffff"
    border.color: "#cccccc"
    radius: 4

    WrapLayout {
        id: emailContainer
        anchors.fill: parent
        anchors.margins: 8
        spacing: 6

        TextField {
            id: emailInput
            width: 120
            height: 24
            placeholderText: "输入邮箱..."
            onAccepted: {
                // 基础非空验证，可自行扩展邮箱格式正则校验
                if (emailInput.text.trim() !== "") {
                    // 创建EmailTag组件并添加到容器
                    let tag = emailTagComponent.createObject(emailContainer, {email: emailInput.text.trim()})
                    // 将输入框移到容器最后，确保输入入口始终在末尾
                    emailInput.parent = null
                    emailContainer.addItem(emailInput)
                    // 清空输入框
                    emailInput.text = ""
                }
            }
        }
    }

    // EmailTag组件工厂
    Component {
        id: emailTagComponent
        EmailTag {}
    }
}

关键细节说明 #

• WrapLayout会自动根据容器宽度换行，彻底解决多行场景的布局问题，替代你之前移动TextArea的方案。
• 通过Component.createObject动态创建邮箱标签，每次输入完成后重置输入框位置，保证输入入口始终可用。
• 可按需扩展：比如添加邮箱格式校验、标签删除功能、输入框宽度自适应等。

内容的提问来源于stack exchange，提问作者Eshy