自动化脚本ui编程之线性布局(linear)

在编写自动化脚本时UI 界面 是实现人机交互、参数配置、流程控制的关键载体。而线性布局（linear）作为UI体系中最基础、最常用、最核心的布局容器，承担着控件有序排列、界面自适应、多控件组合展示的核心作用。熟练掌握线性布局的用法，是快速开发出规范、美观、易用的自动化脚本 UI 的前提。本文全面讲解线性布局（linear）的核心概念、关键属性、使用规则，并提供完整可运行的 Demo 源码，帮助开发者快速上手，高效构建自动化脚本 UI 界面。

一、线性布局（linear）核心概念

线性布局（linear）是冰狐智能辅助 UI 体系中的基础容器布局 ，核心作用是在水平或垂直方向上有序排列子控件，让文本、按钮、输入框、图片等控件按照指定方向依次排布，形成结构清晰、逻辑规整的界面布局冰狐智能辅助。

它的设计理念简洁直观，与 Android 原生 LinearLayout 高度相似，但做了轻量化简化，更适合自动化脚本快速开发，无需复杂样式配置，通过少量属性即可实现绝大多数界面排列需求 。线性布局支持布局嵌套，可通过垂直 + 水平组合实现复杂界面结构，满足参数配置、功能按钮区、信息展示区等多样化 UI 场景。

二、线性布局核心属性详解

线性布局的功能通过自身属性 和子控件属性配合实现，三大核心属性（orientation、layoutGravity、layoutWeight）决定了布局方向、控件对齐方式、尺寸比例分配，下面逐一详解。

（一）orientation：布局方向（核心属性）

orientation是线性布局最基础属性，用于指定子控件的排列方向，只有两个可选值：

• vertical：垂直排列，子控件从上到下依次排布
• horizontal：水平排列，子控件从左到右依次排布

该属性直接决定布局的整体结构，是编写线性布局的第一步，必须明确设置，避免默认值导致排列异常。

基础示例：

<template>
  <!-- 垂直方向线性布局 -->
  <linear orientation="vertical">
    <text text="垂直排列-控件1"/>
    <text text="垂直排列-控件2"/>
    <button text="垂直排列-按钮"/>
  </linear>

  <!-- 水平方向线性布局 -->
  <linear orientation="horizontal">
    <text text="水平排列-控件1"/>
    <text text="水平排列-控件2"/>
    <button text="水平排列-按钮"/>
  </linear>
</template>

（二）layoutGravity：子控件对齐方式

`layoutGravity 是子控件属性 ，用于设置子控件在父布局中的相对位置，必须写在 linear 的子控件上，而非 linear 自身，这是最容易出错的点。

该属性的生效规则与orientation强相关：

1. 当orientation="horizontal"（水平布局）：仅垂直方向的对齐值生效
   • top：靠顶部
   • bottom：靠底部
   • center_vertical：垂直居中
   • center：整体居中（等效垂直居中）
2. 当orientation="vertical"（垂直布局）：仅水平方向的对齐值生效
   • left：靠左
   • right：靠右
   • center_horizontal：水平居中
   • center：整体居中（等效水平居中）

常用取值：left、right、top、bottom、center、center_vertical、center_horizontal

示例：水平布局中，子控件垂直方向对齐

<template>
  <linear orientation="horizontal" height="100">
    <text text="顶部对齐" layoutGravity="top"/>
    <text text="垂直居中" layoutGravity="center_vertical"/>
    <button text="底部对齐" layoutGravity="bottom"/>
  </linear>
</template>

（三）layoutWeight：子控件权重（自适应关键）

layoutWeight是线性布局实现屏幕自适应、等比例分配尺寸的核心属性，用于计算子控件在布局中所占的宽度（水平布局）或高度（垂直布局）比例。

1. 权重计算规则

以水平布局（horizontal）为例：

• 子控件宽度 = 布局剩余宽度 × (当前控件 weight ÷ 所有设置 weight 控件的总 weight)
• 剩余宽度 = 线性布局总宽度 - 未设置 weight 控件的宽度总和

垂直布局（vertical）规则一致，仅将宽度替换为高度。

2. 关键注意事项

• 水平布局 + 设置 weight：子控件width必须设为0
• 垂直布局 + 设置 weight：子控件height必须设为0
• 不设置 weight 的控件，会先占用自身固有尺寸，剩余空间再按权重分配给带 weight 的控件

示例 1：纯权重等分（无固定尺寸控件）

<template>
  <!-- 水平布局，宽度填充父容器 -->
  <linear orientation="horizontal" width="matchParent">
    <!-- 权重1，宽度占1/3 -->
    <text text="控件1" layoutWeight="1" width="0" backgroundColor="#EEEEEE"/>
    <!-- 权重2，宽度占2/3 -->
    <button text="按钮" layoutWeight="2" width="0" backgroundColor="#CCCCCC"/>
  </linear>
</template>

效果：text 占 1/3 宽度，button 占 2/3 宽度。

示例 2：包含固定尺寸控件 + 权重分配

<template>
  <linear orientation="horizontal" width="matchParent">
    <!-- 固定宽度输入框，优先占用尺寸 -->
    <edit text="固定控件" width="100"/>
    <!-- 剩余宽度按权重分配 -->
    <text text="权重1" layoutWeight="1" width="0"/>
    <button text="权重2" layoutWeight="2" width="0"/>
  </linear>
</template>

效果：edit 先占 100dp 宽度，剩余空间按 1:2 分配给 text 和 button。

三、线性布局完整实战 Demo（可直接运行）

下面提供一个完整、可直接在冰狐智能辅助平台运行 的线性布局综合 Demo，包含垂直布局、水平布局、对齐属性、权重分配、布局嵌套，覆盖日常 UI 开发 90% 场景，代码无<script>包裹，符合平台规范。

功能说明

1. 顶部标题区：水平居中展示标题
2. 中间配置区：垂直布局 + 权重分配，实现输入框、下拉框、按钮的规整排列
3. 底部操作区：水平权重分配，实现两个按钮等分宽度

完整 Demo 源码

<template>
  <!-- 根布局：垂直方向，填充父容器 -->
  <linear orientation="vertical" width="matchParent" height="matchParent" padding="10">

    <!-- 1. 顶部标题栏：水平布局，居中对齐 -->
    <linear orientation="horizontal" width="matchParent" height="50" backgroundColor="#2196F3">
      <text
        text="自动化脚本配置界面"
        size="18"
        color="#FFFFFF"
        layoutGravity="center_vertical"
        layoutWeight="1"
        width="0"
        gravity="center"
      />
    </linear>

    <!-- 2. 参数配置区：垂直布局，间距10dp -->
    <linear orientation="vertical" width="matchParent" layoutMarginTop="10">
      <!-- 配置项1：文本+输入框，水平排列 -->
      <linear orientation="horizontal" width="matchParent" height="40">
        <text text="执行次数：" size="16" layoutGravity="center_vertical"/>
        <edit
          text="10"
          width="matchParent"
          size="16"
          layoutMarginLeft="5"
          layoutGravity="center_vertical"
        />
      </linear>

      <!-- 配置项2：文本+下拉框，水平排列 -->
      <linear orientation="horizontal" width="matchParent" height="40" layoutMarginTop="5">
        <text text="执行模式：" size="16" layoutGravity="center_vertical"/>
        <spinner
          entries="普通模式|极速模式|循环模式"
          width="matchParent"
          layoutMarginLeft="5"
          layoutGravity="center_vertical"
        />
      </linear>

      <!-- 配置项3：状态提示，垂直居中 -->
      <text
        text="当前状态：未启动"
        size="16"
        color="#FF673A"
        width="matchParent"
        height="40"
        layoutGravity="center_horizontal"
        gravity="center"
        layoutMarginTop="5"
      />
    </linear>

    <!-- 3. 底部操作按钮：水平权重等分 -->
    <linear orientation="horizontal" width="matchParent" height="50" layoutMarginTop="10">
      <button
        text="开始执行"
        backgroundColor="#4CAF50"
        color="#FFFFFF"
        size="16"
        layoutWeight="1"
        width="0"
        layoutMarginRight="5"
      />
      <button
        text="停止执行"
        backgroundColor="#F44336"
        color="#FFFFFF"
        size="16"
        layoutWeight="1"
        width="0"
        layoutMarginLeft="5"
      />
    </linear>

  </linear>
</template>

四、线性布局开发常见误区与避坑指南

1. layoutGravity 属性位置错误错误：写在 linear 标签上；正确：必须写在子控件上。
2. 权重搭配尺寸错误水平布局 + weight 未设 width="0"，垂直布局 + weight 未设 height="0"，导致权重不生效。
3. 方向与对齐不匹配水平布局用 left/right，垂直布局用 top/bottom，对齐效果失效。
4. 嵌套层级过多线性布局支持嵌套，但建议不超过 3 层，避免界面渲染卡顿。
5. 尺寸设置混乱优先用 matchParent、wrapContent 适配，固定 dp 尺寸仅用于固定控件，避免屏幕适配异常。

五、总结

线性布局（linear）是冰狐智能辅助 UI 开发的基石，掌握 orientation、layoutGravity、layoutWeight 三大核心属性，即可快速构建出规范、自适应、易用的自动化脚本界面。它轻量化、易上手、兼容性强，适合参数配置、功能按钮、信息展示等绝大多数场景，配合布局嵌套可实现复杂界面结构。本文提供的 Demo 源码可直接运行，开发者可基于此修改控件、调整属性、添加业务逻辑，快速完成自己的自动化脚本 UI 开发。