Kinlink开发者中心

Layout API

Layout API 提供了一系列方法用于控制表单布局元素的显示状态和获取其尺寸信息，支持响应式设计和移动端适配。

页眉控制

提供对页眉元素的完整控制能力，包括显示状态和高度获取。

JavaScript
// 获取页眉高度
const headerHeight = kinlink.layoutApi.getHeaderHeight();

// 检查页眉是否可见
const isVisible = kinlink.layoutApi.isHeaderVisible();

// 隐藏页眉
kinlink.layoutApi.hideHeader();

// 显示页眉
kinlink.layoutApi.showHeader();

移动端适配

专门针对移动端设备的布局控制方法，包括操作栏管理和设备检测。

JavaScript
// 检查是否为移动设备
if (kinlink.layoutApi.checkIsMobileDevice()) {
  // 隐藏移动端表单操作栏
  kinlink.layoutApi.mobileHideFormActionBar();
  
  // 获取操作栏高度
  const barHeight = kinlink.layoutApi.mobileGetFormActionBarHeight();
  
  // 显示操作栏
  kinlink.layoutApi.mobileShowFormActionBar();
}

布局变化监听

提供布局元素状态变化的事件监听机制。

JavaScript
// 监听布局变化
const cleanup = kinlink.layoutApi.onLayoutChange((detail) => {
  const { element, visible, height } = detail;
  console.log(`${element} 可见性变更为: ${visible}`);
  if (height !== undefined) {
    console.log(`新高度: ${height}px`);
  }
});

// 清理监听器
cleanup();

桌面端特性

  • 页眉和页脚控制
  • 提交按钮位置管理
  • 内容区域自适应

移动端特性

  • 专用操作栏控制
  • 触控优化布局
  • 响应式适配

最佳实践

  • 总是在 FORM_LOADED 事件中初始化布局
  • 使用 checkIsMobileDevice() 进行设备适配
  • 注意清理不再需要的布局变化监听器
  • 考虑不同设备尺寸下的布局表现

相关资源