Slint技术咨询：如何让组件继承其所在宿主组件的宽高

你遇到的问题核心是：在Txt组件的定义块内无法直接引用外层Demo组件，因为parent/root在组件定义上下文里指向的是Txt自身或其直接父容器（实例化后的父元素），而非外层的Demo。下面是几种可行的实现方式：

方式一：给Demo组件设置ID直接引用（最直观） #

给Demo组件添加一个唯一ID，在Txt的实例化代码中直接通过ID获取Demo的宽度：

import { AboutSlint, Button, VerticalBox } from "std-widgets.slint";

export component Txt inherits Text{
    text: "hi";
}
export component Demo {
    id: demo_root; // 给Demo组件设置唯一ID
    VerticalBox {
        alignment: start;
        Rectangle {
            width: 400px;
            Text {
                text: "Hello World!";
                font-size: 24px;
                horizontal-alignment: center;
            }
            Txt{
                x: 20px;
                width: demo_root.width; // 通过ID引用Demo的宽度
            }
            AboutSlint {
                preferred-height: 150px;
            }
        }
        
        HorizontalLayout { alignment: center; Button { text: "OK!"; } }
    }
}

方式二：通过属性传递（解耦组件依赖） #

给Txt组件定义一个输入属性，在Demo中把自身宽度绑定到这个属性上，适合组件需要复用的场景：

import { AboutSlint, Button, VerticalBox } from "std-widgets.slint";

export component Txt inherits Text{
    text: "hi";
    in property<int> demo-width; // 定义接收外部宽度的输入属性
    width: demo-width; // 使用属性设置自身宽度
}
export component Demo {
    VerticalBox {
        alignment: start;
        Rectangle {
            width: 400px;
            Text {
                text: "Hello World!";
                font-size: 24px;
                horizontal-alignment: center;
            }
            Txt{
                x: 20px;
                demo-width: self.width; // 把Demo的宽度传递给Txt
            }
            AboutSlint {
                preferred-height: 150px;
            }
        }
        
        HorizontalLayout { alignment: center; Button { text: "OK!"; } }
    }
}

方式三：层级遍历父组件（不推荐，依赖结构） #

如果不想修改组件定义，也可以通过多层parent遍历到Demo组件，但这种方式依赖固定的组件层级，后续结构变更会导致失效：

// 在Txt的实例化代码中修改width
Txt{
    x: 20px;
    width: parent.parent.parent.width; 
    // 层级说明：Txt -> Rectangle -> VerticalBox -> Demo
}

为什么之前的引用不生效？ #

• 在Txt组件的定义块（export component Txt {...}）内，parent指的是组件被实例化后的直接父元素，而非外层Demo；root指向的是Txt自身的根节点（即Text组件），无法访问外部的Demo。
• 只有在组件的实例化位置（Demo中的Txt{...}块），才能正确引用外部组件的ID、self（当前Demo组件）或多层parent。

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