appwindow.slint

import { Button, VerticalBox, SpinBox, HorizontalBox, LineEdit} from "std-widgets.slint";

component CharacterStat  inherits Rectangle {
    in property<string> statname: "???";
    in property<int> value: 12;    
    HorizontalLayout {
        alignment: stretch;
        Text { text: "\{statname}"; }        
        LineEdit {
            text: "\{value}";
        }
    }
}

export component AppWindow inherits Window {    
    in-out property<int> counter: 42;

    in-out property<int> statStr: 15;
    in-out property<int> statDex: 14;

    callback request-increase-value();
    callback print-char();
    VerticalBox {
        Text {
            text: "Counter: \{root.counter}";
        }
        
        statBoxStr := CharacterStat { statname: "STR"; value: statStr; }
        statBoxDex := CharacterStat { statname: "DEX"; value: statDex; }
        statBoxInt := CharacterStat { statname: "INT"; }
        statBoxWis := CharacterStat { statname: "WIS"; }

        HorizontalBox { 
            Button {
                text: "Increase value";
                clicked => {
                    root.request-increase-value();
                }
            }
            Button {
                clicked => {
                    root.print-char();
                }
                text: "Print";
            }
        }
     }
}

main.cpp

#include <stdio.h>
#include "appwindow.h"

int main(int argc, char **argv)
{
    auto ui = AppWindow::create();

    ui->on_request_increase_value([&]{
        ui->set_counter(ui->get_counter() + 1);
    });

    ui->on_print_char( [&]{
        ui->set_counter(ui->get_counter() + 5);
      
      // How to refer to statBoxStr.value? or bind statStr property to .value?
      printf("STR: %d\n", ui->get_statStr() );        
       printf("DEX: %d\n", ui->get_statDex() );        
    });

    ui->run();
    return 0;
}