如何在AngularJS中创建带约束的可横向调整同级Div容器

嘿，我来帮你搞定这个AngularJS可调整容器的难题！你遇到的问题核心在于angular-resizable的r-flex特性和默认flex布局的自动伸缩逻辑冲突，导致多余容器被调整，同时最小宽度限制没生效。下面是一步步的解决方案：

1. 重构布局样式，避免默认flex自动伸缩 #

首先修改CSS，让父容器保持flex布局，但每个可调整的容器不自动伸缩，同时设置统一的最小宽度：

.row {
  display: flex;
  width: 100%;
  overflow: hidden; /* 彻底防止容器溢出父元素 */
}

section {
  flex: 0 0 auto; /* 关键：禁用flex的自动伸缩，宽度完全由我们手动控制 */
  min-width: 150px; /* 自定义最小宽度，和JS逻辑保持一致 */
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box; /* 确保padding和border不影响宽度计算 */
}

2. 修改HTML结构，移除冲突的r-flex并添加自定义resize回调 #

去掉r-flex="true"（它会触发全局flex调整），给每个可调整容器绑定自定义的resize处理函数：

<div class="row">
  <section id="one" resizable r-directions="['right']" r-on-resize="resizeHandler($event, 'one')">
    <p>Schedule part 1</p>
  </section>
  <section id="two" resizable r-directions="['right']" r-on-resize="resizeHandler($event, 'two')">
    <p>Schedule part 2</p>
  </section>
  <section id="three" resizable r-directions="['right']" r-on-resize="resizeHandler($event, 'three')">
    <p>Schedule part 3</p>
  </section>
  <section id="four">
    <p>Schedule part 4</p>
  </section>
</div>

3. 实现控制器的resize逻辑，精准控制相邻容器宽度 #

在AngularJS控制器里写resizeHandler函数，核心是只修改当前容器和下一个相邻容器的宽度，同时严格检查最小宽度限制：

angular.module('yourAppName', ['angularResizable'])
.controller('MainController', function($scope) {
  const minWidth = 150; // 和CSS的min-width保持一致
  const containerIds = ['one', 'two', 'three', 'four'];

  // 初始化：把父容器宽度平均分配给四个容器
  const initWidth = `${100 / containerIds.length}%`;
  containerIds.forEach(id => {
    document.getElementById(id).style.width = initWidth;
  });

  $scope.resizeHandler = function(event, currentId) {
    const currentEl = document.getElementById(currentId);
    const nextEl = currentEl.nextElementSibling;
    
    // 最后一个容器没有下一个元素，直接返回
    if (!nextEl) return;

    // 计算宽度变化量
    const deltaX = event.width - parseInt(currentEl.style.width);
    const currentWidth = parseInt(currentEl.style.width);
    const nextWidth = parseInt(nextEl.style.width);

    // 计算调整后的新宽度
    const newCurrentWidth = currentWidth + deltaX;
    const newNextWidth = nextWidth - deltaX;

    // 检查是否满足最小宽度要求
    if (newCurrentWidth >= minWidth && newNextWidth >= minWidth) {
      // 合法调整：更新两个容器的宽度
      currentEl.style.width = `${newCurrentWidth}px`;
      nextEl.style.width = `${newNextWidth}px`;
    } else {
      // 超出最小宽度限制：重置到边界值
      if (newCurrentWidth < minWidth) {
        currentEl.style.width = `${minWidth}px`;
        nextEl.style.width = `${currentWidth + nextWidth - minWidth}px`;
      } else if (newNextWidth < minWidth) {
        nextEl.style.width = `${minWidth}px`;
        currentEl.style.width = `${currentWidth + nextWidth - minWidth}px`;
      }
    }

    // 阻止angular-resizable的默认flex调整行为
    event.preventDefault();
  };
});

为什么这个方案能解决你的问题？ #

• 避免多余容器调整：通过flex: 0 0 auto禁用了flex的自动伸缩，加上手动只修改相邻两个容器的宽度，彻底杜绝了其他容器被影响的情况。
• 最小宽度生效：在resize逻辑里提前计算新宽度，只有满足最小宽度要求才执行调整，否则重置到最小宽度边界。
• 防止元素溢出：父容器添加overflow: hidden，加上严格的宽度计算，确保总宽度始终等于父容器宽度。

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