Slint中点击按钮获取输入框值失败，求问题排查及简化方案

问题原因 #

• 命名冲突：根组件的name、amt属性与内部LineEdit的id重名，导致调用name.setName()时无法正确指向LineEdit组件，属性更新逻辑直接失效。
• 冗余手动更新：通过自定义setName/setCost函数同步属性的方式完全没必要，没有利用Slint的响应式数据绑定特性，既复杂又易出错。
• 文本未动态绑定：txt组件的text仅在初始化时赋值，未与根属性绑定，即便属性更新也不会自动刷新显示。

简化实现方案 #

核心思路是利用Slint的数据绑定和组件引用特性，消除命名冲突，让属性同步与UI更新自动完成。

优化后的Slint代码 #

slint::slint!{
    import { Button, LineEdit} from "std-widgets.slint";
    export component ExpenseTracker inherits Window {
        width: 400px;
        height: 300px;
        background: #f0f0f0;
        
        // 根组件属性，存储用户输入的费用信息
        in-out property<string> expense_name;
        in-out property<string> expense_amount;

        // 提交回调，供Rust后端处理业务逻辑
        callback on_submit <=> submit_btn.clicked;

        // 动态绑定的文本显示，属性更新时自动刷新
        txt := Text {
            text: "Name: " + root.expense_name + ", Cost: " + root.expense_amount;
            font-size: 16px;
            color: #000;
            horizontal-alignment: center;
            vertical-alignment: center;
            y: 250px;
        }

        VerticalLayout { 
            Rectangle {
                width: parent.width;
                height: 20px;
                background: #ccc;
            }

            Text{
                text: "Hello";
                font-size: 24px;
                color: #333;
                horizontal-alignment: center;
                vertical-alignment: center;
            }

            Text {
                text: "Enter expense information below:";
                font-size: 20px;
                vertical-alignment: center;
                horizontal-alignment: center;
            }

            HorizontalLayout {
                alignment: center;
                spacing: 66px;
                VerticalLayout {
                    Text{
                        text: "Name";
                        font-size: 16px;
                        color: #555;
                        horizontal-alignment: center;
                    }
                    // 修改LineEdit的id，避免与根属性命名冲突
                    name_input := LineEdit {
                        placeholder-text: "Enter name";
                        width: 101px;
                        horizontal-alignment: center;
                    }
                }
                VerticalLayout {
                    Text{
                        text: "Cost";
                        font-size: 16px;
                        color: #555;
                        horizontal-alignment: center;
                    }
                    amount_input := LineEdit {
                        placeholder-text: "Enter cost";
                        width: 101px;
                        horizontal-alignment: center;
                    }
                }
            }
            spacing: 10px;

            submit_btn := Button { 
                text: "Submit"; 
                width: 100px;
                height: 40px;
                x: 150px;
                clicked => {
                    // 点击按钮直接同步输入框内容到根属性
                    root.expense_name = name_input.text;
                    root.expense_amount = amount_input.text;
                    // 触发后端回调传递数据
                    root.on_submit();
                }
            }

            Rectangle {
                width: parent.width;
                height: 20px;
                background: #cccfcc;
            }
        }
    }
}

关键改进点 #

• 消除命名冲突：将LineEdit的id改为name_input、amount_input，与根组件属性expense_name、expense_amount明确区分，避免访问歧义。
• 简化同步逻辑：点击按钮时直接将输入框的text赋值给根属性，去掉冗余的自定义函数，逻辑清晰直观。
• 自动UI更新：txt组件的text直接绑定到根属性，属性变化时自动刷新显示，无需手动修改文本内容。
• 直接触发回调：同步属性后直接调用on_submit回调，方便Rust后端获取最新的输入数据。

Rust后端示例（获取输入数据） #

fn main() {
    let app = ExpenseTracker::new().unwrap();
    
    // 监听提交事件，获取并处理费用信息
    app.on_on_submit(move || {
        let name = app.expense_name();
        let amount = app.expense_amount();
        println!("新增费用：名称={}, 金额={}", name, amount);
        // 此处可添加保存到数据库等业务逻辑
    });
    
    app.run().unwrap();
}

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