自动化脚本ui编程之flexbox布局

自动化脚本中灵活、高效、自适应 的 UI 界面是提升脚本易用性与专业性的关键。传统线性布局（linear）虽简单易用，但在处理多控件换行、均匀分布、弹性占比、垂直居中 等场景时，代码冗余且适配性差。而平台内置的Flexbox 弹性布局，完美解决了这些痛点，它以极简属性配置，实现复杂界面排列，是自动化脚本 UI 开发的首选方案。

一、Flexbox 布局核心概念

冰狐智能辅助的Flexbox 全称Flexible Box （弹性盒子），是一种一维布局模型，核心由容器（flexbox） 和子项（容器内的控件） 组成：

容器：通过<flexbox>标签定义，所有布局属性作用于容器，控制子项整体排列规则；
子项：容器内的直接子控件（text、button、radio 等），通过子项属性实现单独布局控制；
主轴与交叉轴：Flexbox 的核心坐标体系，主轴为子项默认排列方向，交叉轴与主轴垂直，所有对齐、分布属性均围绕两轴展开。

相比线性布局，Flexbox 具备三大核心优势：

自动换行：无需嵌套多层布局，一行属性实现控件自动换行；
弹性占比：快速实现控件按比例分配空间，适配不同屏幕；
精准对齐：轻松实现水平居中、垂直居中、均匀分布等效果，代码量减少 50% 以上。

二、Flexbox 容器核心属性

容器属性是 Flexbox 的核心，直接决定子项的排列方向、换行规则、对齐方式，共 5 大核心属性，覆盖 90% 以上开发场景。

1. flexDirection：主轴方向

定义子项在容器内的排列方向，决定主轴走向，支持 4 种取值：

row：默认值，水平从左到右排列；
row_reverse：水平从右到左反向排列；
column：垂直从上到下排列；
column_reverse：垂直从下到上反向排列。

代码示例：

XML 复制代码

<template>
  <!-- 水平正向排列 -->
  <flexbox flexDirection="row" width="matchParent" height="wrapContent">
    <text text="水平1" size="20" margin="5" />
    <text text="水平2" size="20" margin="5" />
    <text text="水平3" size="20" margin="5" />
  </flexbox>

  <!-- 垂直排列 -->
  <flexbox flexDirection="column" width="matchParent" height="wrapContent" marginTop="10">
    <text text="垂直1" size="20" margin="5" />
    <text text="垂直2" size="20" margin="5" />
    <text text="垂直3" size="20" margin="5" />
  </flexbox>
</template>

2. flexWrap：换行方式

控制子项超出容器宽度 / 高度时是否自动换行，支持 3 种取值：

nowrap：默认值，不换行，超出部分裁剪；
wrap：自动换行，正常顺序向下换行；
wrap_reverse：反向换行，从下往上换行。

核心场景：多选按钮、标签组、多按钮排列，无需手动计算宽度，自动适配屏幕。

3. justifyContent：主轴对齐方式

定义子项在主轴上的对齐与分布规则，支持 6 种取值：

flex_start：默认，靠主轴起点对齐；
flex_end：靠主轴终点对齐；
center：主轴居中对齐；
space_between：两端对齐，子项间距相等；
space_around：子项两侧间距相等，两端间距为中间一半；
space_evenly：所有子项间距完全相等（最常用的均匀分布）。

4. alignItems：交叉轴对齐方式

定义子项在交叉轴上的对齐规则（单行生效），支持 5 种取值：

flex_start：靠交叉轴起点对齐；
flex_end：靠交叉轴终点对齐；
center：交叉轴居中（实现垂直 / 水平居中核心）；
baseline：按子项文本基线对齐；
stretch：默认，子项拉伸填满交叉轴空间。

5. alignContent：多行交叉轴对齐

当子项换行形成多行时，控制多行整体在交叉轴的对齐方式，支持 5 种取值：

flex_start：靠交叉轴起点对齐；
flex_end：靠交叉轴终点对齐；
center：交叉轴居中；
space_between：多行两端对齐；
space_around：多行间距均匀；
stretch：多行拉伸填满交叉轴。

三、Flexbox 子项核心属性

子项属性作用于容器内的单个控件，实现单独排序、弹性占比、单独对齐等个性化设置，共 6 大实用属性。

1. layout_order：布局顺序

控制子项的显示顺序，值越小越靠前，默认 0，支持正 / 负整数，无需修改 XML 结构即可调整控件位置。

示例：layout_order="1"的控件排在layout_order="2"前面。

2. layout_flexGrow：弹性放大比例

定义子项分配剩余空间的比例，默认 0（不放大），值为非负浮点数。

多个子项设置该属性，按比例瓜分容器剩余空间；
经典用法：layout_flexGrow="1"，让控件填满剩余空间。

3. layout_flexShrink：弹性收缩比例

定义子项空间不足时的收缩比例，默认 1（等比例收缩），值为非负浮点数。

值为 0 时，控件不收缩，保持原始尺寸；
适用于需固定宽度的按钮、图标等控件。

4. layout_flexBasisPercent：初始主轴尺寸百分比

设置子项在主轴上的初始占比，值为 0~1 的浮点数（如 0.2 代表 20%），优先级高于控件自身宽度。

5. layout_alignSelf：单独交叉轴对齐

让单个子项覆盖容器的 alignItems 属性，单独设置交叉轴对齐方式，取值同 alignItems，实现个性化对齐。

6. layout_wrapBefore：强制换行

布尔值（true/false），设置为true时，该子项前强制换行，独立占据一行，灵活控制布局结构。

四、Flexbox 实战 Demo（可直接运行）

以下 Demo 基于冰狐智能辅助平台规范编写，无<script>标签，纯<template>+ 逻辑函数，实现单选按钮自动换行、弹性按钮占比、垂直水平居中三大核心场景，复制即可运行。

Demo1：Radio 单选组自动换行（最常用场景）

解决传统布局中 Radio 超出屏幕无法显示的问题，Flexbox 一行flexWrap="wrap"实现自动换行，搭配单选逻辑。

javascript 复制代码

<template>
  <flexbox width="matchParent" flexWrap="wrap" padding="10" backgroundColor="#f5f5f5">
    <radio id="fruit1" text="苹果" onChecked="cbChecked" margin="5" size="18" />
    <radio id="fruit2" text="橘子" onChecked="cbChecked" margin="5" size="18" />
    <radio id="fruit3" text="香蕉" onChecked="cbChecked" margin="5" size="18" />
    <radio id="fruit4" text="葡萄" onChecked="cbChecked" margin="5" size="18" />
    <radio id="fruit5" text="西瓜" onChecked="cbChecked" margin="5" size="18" />
    <radio id="fruit6" text="草莓" onChecked="cbChecked" margin="5" size="18" />
    <radio id="fruit7" text "芒果" onChecked="cbChecked" margin="5" size="18" />
    <radio id="fruit8" text="榴莲" onChecked="cbChecked" margin="5" size="18" />
  </flexbox>
</template>

// 全局变量，记录当前选中的Radio
var selectRB = null;

function main() {
  // 初始化并显示UI
  setupUI();
}

// Radio选中回调函数
function cbChecked(rb, checked) {
  console.log(rb.text, "选中状态：", checked);
  // 实现互斥单选逻辑
  if (rb == selectRB) {
    // 重复点击，取消选中
    rb.checked(false);
    selectRB = null;
  } else {
    // 取消上一个选中状态
    if (selectRB != null) {
      selectRB.checked(false);
    }
    selectRB = rb;
  }
}

Demo2：弹性按钮占比 + 均匀分布

实现左侧固定按钮 + 右侧弹性输入框 、三按钮等分两种经典布局，无需计算宽度，自动适配屏幕。

javascript 复制代码

<template>
  <!-- 布局1：固定按钮+弹性输入框 -->
  <flexbox width="matchParent" height="wrapContent" alignItems="center" margin="10">
    <button text="搜索" size="18" width="80" height="40" />
    <edit hint="请输入内容" layout_flexGrow="1" height="40" marginLeft="5" />
  </flexbox>

  <!-- 布局2：三按钮等分排列 -->
  <flexbox width="matchParent" height="wrapContent" justifyContent="space_evenly" margin="10">
    <button text="按钮1" layout_flexGrow="1" height="40" margin="2" />
    <button text="按钮2" layout_flexGrow="1" height="40" margin="2" />
    <button text="按钮3" layout_flexGrow="1" height="40" margin="2" />
  </flexbox>
</template>

function main() {
  setupUI();
}

Demo3：垂直水平居中 + 强制换行

实现控件屏幕居中 ，并通过layout_wrapBefore强制换行，灵活控制布局结构。

javascript 复制代码

<template>
  <flexbox 
    width="matchParent" 
    height="300" 
    justifyContent="center" 
    alignItems="center"
    backgroundColor="#eeeeee"
    margin="10"
  >
    <text text="居中标题" size="24" bold="true" />
    <!-- 强制在此控件前换行 -->
    <button text="独立行按钮" layout_wrapBefore="true" width="150" height="45" marginTop="10" />
  </flexbox>
</template>

function main() {
  setupUI();
}

五、Flexbox 布局开发技巧

优先使用容器属性 ：90% 场景通过flexDirection+flexWrap+justifyContent+alignItems即可实现，减少子项属性使用；
弹性占比核心 ：layout_flexGrow="1"是填满剩余空间的万能写法，适配不同分辨率屏幕；
换行必配width="matchParent"：自动换行需指定容器宽度为父容器宽度，否则无法计算换行点；
避免嵌套过深：Flexbox 本身灵活性极强，尽量不嵌套多层 flexbox，提升渲染效率。

六、总结

Flexbox 布局是冰狐智能辅助 UI 开发的核心功能，它以极简的属性配置，解决了传统布局的换行、对齐、占比三大痛点，大幅提升开发效率。建议开发者将文中 Demo 复制到冰狐智能辅助平台，修改属性值直观感受效果，熟练运用后，可轻松开发出媲美原生应用的自动化脚本 UI。