在Firemonkey中如何从其他组件获取样式对象（如TGrid的linefill对象）

通用解决方案 #

不同UI框架的TGrid组件内部结构略有差异，可根据你的技术栈选择以下方案：

方案1：直接引用组件库全局样式变量（稳定性最高，优先选择） #

正规组件库的公共样式色值都会统一封装为对外暴露的全局变量，不需要从组件实例读取，不受组件渲染状态影响。
示例代码：

// 对应你的组件库主题变量导入路径
import { ComponentTokens } from '你的组件库路径/const/theme'

const handleButtonClick = () => {
  const lineFill = ComponentTokens.Grid.lineFill
  // 后续业务逻辑
}

如果是CSS层面复用，直接使用组件库对应的全局CSS变量即可，例如var(--component-grid-line-fill)。

方案2：从已渲染的TGrid实例读取 #

给页面上的TGrid组件绑定ref标识，点击事件中通过ref获取组件实例后读取对应属性：

<!-- Vue框架示例，React/原生框架逻辑一致，替换为对应框架的ref获取方式即可 -->
<t-grid ref="gridRef" />
<button @click="handleClick">获取linefill</button>

<script>
export default {
  methods: {
    handleClick() {
      const gridInstance = this.$refs.gridRef
      // 不同组件库属性路径可能有差异，可打印实例后调整取值路径
      const lineFill = gridInstance?.$props?.lineFill || gridInstance?.styleConfig?.lineFill
    }
  }
}

方案3：从渲染后的DOM读取计算样式 #

如果组件未暴露内部样式配置，可直接获取TGrid渲染后的DOM节点，读取计算样式：

const handleButtonClick = () => {
  // 替换为你的TGrid组件实际渲染的类名
  const gridDom = document.querySelector('.t-grid')
  if (!gridDom) return
  const computedStyle = getComputedStyle(gridDom)
  // 替换为linefill对应的实际CSS属性，比如背景色取backgroundColor
  const lineFill = computedStyle.backgroundColor
}

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