快速开始

FlexLayout基本上负责单方向的分割屏幕。

基本行分割

tsx

<FlexLayout layoutName="basic-row_1" direction="row">
  <FlexLayoutContainer containerName="basic-row_1-left" isResizePanel>
    <div>Left</div>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="basic-row_1-mid" isResizePanel>
    <div>Mid</div>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="basic-row_1-right">
    <div>Right</div>
  </FlexLayoutContainer>
</FlexLayout>

备注

isResizePanel = true在这种情况下，resizePanel将作为容器的兄弟元素进行渲染。例如，Mid容器和Right之间的resizePanel的所有权属于Mid，但mid-resizePanel处理自己两侧的兄弟元素。

警告

在大多数使用案例中，最后一个元素不需要添加。 isResizePanel如果添加到最后一个元素，可能会与浏览器自身的调整大小功能重叠，从而影响用户体验。

当需要动态渲染时， isResizePanel建议使用状态，而不是提前将其渲染为true。

tsx

<FlexLayout layoutName="basic-row_2" direction="row">
  <FlexLayoutContainer containerName="basic-row_2-mid" isResizePanel>
    <div>
      <div>Mid</div>
      <button onClick={() => startTransition(() => setIsTwoRight(prev => !prev))}>ToggleIsTwoRight</button>
    </div>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="basic-row_2-right" isResizePanel={isTwoRight}>
    <div>Right</div>
  </FlexLayoutContainer>

  {isTwoRight ? 
    <FlexLayoutContainer containerName="basic-row_2-right2">
      <div>Right To Right</div>
    </FlexLayoutContainer> : <></>
  }
</FlexLayout>

列分割 + 增长

在垂直分割中预先分配特定区域比例

tsx


  <FlexLayout layoutName="basic-column_3" direction="column">
    <FlexLayoutContainer containerName="basic-column_3-top" isResizePanel grow={0.45}>
      <div>Left</div>
    </FlexLayoutContainer>
    <FlexLayoutContainer containerName="basic-column_3-mid">
      <div>Mid</div>
    </FlexLayoutContainer>

    <FlexLayoutContainer containerName="basic-column_3-right">
      <div>Right</div>
    </FlexLayoutContainer>
  </FlexLayout>

备注

如果不指定增长，则除显式指定的增长值外，其余值将均匀分配给未指定增长的容器。
也就是说，在上面的代码中，顶部容器的增长为0.45，其余的中间和右侧容器的增长为1.275。

注意

建议尽量将props中指定的增长值不超过容器的数量。

多重交叉（嵌套）

两个方向以上的分割通过重叠FlexLayout生成

tsx


  <FlexLayout layoutName="basic-row_4" direction="row">
    <FlexLayoutContainer containerName="basic-row_4-left" isResizePanel>
      <div>
        <FlexLayout layoutName="basic-row_4-basic-column-left" direction="column">
          <FlexLayoutContainer containerName="basic-row_4-left-top" isResizePanel>
            <div>left-top</div>
          </FlexLayoutContainer>
          <FlexLayoutContainer containerName="basic-row_4-left-bottom">
            <div>left-bottom</div>
          </FlexLayoutContainer>
        </FlexLayout>
      </div>
    </FlexLayoutContainer>

    <FlexLayoutContainer containerName="basic-row_4-right">
      <div >
        <FlexLayout layoutName="basic-row_4-basic-column-right" direction="column">
          <FlexLayoutContainer containerName="basic-row_4-right-top" isResizePanel>
            <div>right-top</div>
          </FlexLayoutContainer>
          <FlexLayoutContainer containerName="basic-row_4-right-bottom">
            <div>right-bottom</div>
          </FlexLayoutContainer>
        </FlexLayout>
      </div>
    </FlexLayoutContainer>
  </FlexLayout>

备注

由于FlexLayout基于CSS的flex，因此当方向设置为列时，如果基准父元素的高度未确定（例如：auto），则调整大小可能无法正常工作。
（在本文中，CodeBlock隐式地充当高度的角色。）
同样，在没有可调整大小的剩余空间的情况下，调整大小也将无法正常工作。

备注

FlexLayoutContainer将所需的样式配置传递给其直接子元素，以便width: 100%、height: 100%等调整大小能够正常工作。
如果不希望受到其影响，建议先将div作为直接子元素进行包装。
同样出于这个原因，如果您想防止意外行为，建议不要创建两个或更多的直系后代。

min/max + isFitContent

调整大小范围限制 + 基于内容大小的限制

通过在FlexLayoutContainer中使用CSS指定最小/最大大小，可以控制调整大小的范围。

tsx

const [handleSizeTarget, setHandleSizeTarget] = useState<HTMLElement|null>(null);

useEffect(()=>{
  const layoutSubscribe = getLayoutInfos('basic-row_7').subscribe((layout)=>{
    const leftContainer = layout.container?.['basic-row_7-left']?.current;
    if(leftContainer){
      setHandleSizeTarget(leftContainer);
    }
  });
  return ()=>{
    layoutSubscribe.unsubscribe();
  }
},[])

useEffect(()=>{
  if(!handleSizeTarget) return;
  handleSizeTarget.style.minWidth = '25px';
  handleSizeTarget.style.maxWidth = '180px';
},[handleSizeTarget])

或者可以这样使用。

tsx

const { layout: containers, container, resizePanel } = useDecompositionLayout({
  layoutName: 'basic-row_7',
  containerName: 'basic-row_7-left',
});

useEffect(()=>{
  if(!container) return;
  container.style.minWidth = '25px';
  container.style.maxWidth = '180px';
},[container])

执行结果如下。

tsx

<FlexLayout layoutName="basic-row_7" direction="row">
  <FlexLayoutContainer containerName="basic-row_7-left" isResizePanel>
    <div>Left</div>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="basic-row_7-mid" isResizePanel>
    <div>Mid</div>
  </FlexLayoutContainer>
  <FlexLayoutContainer
    containerName="basic-row_7-right"
    isFitContent
  >
    <div
      style={{
        whiteSpace: "nowrap",
        textWrapMode: "nowrap",
        paddingRight:'1rem'
      }}
    >
      I'm Using Fit Content{" "}
    </div>
  </FlexLayoutContainer>
</FlexLayout>

备注

在useEffect之后，左侧容器不会小于25px，也不会大于180px。
如果想将内部内容的动态大小设置为最大大小 <FlexLayoutContainer isFitContent>...</FlexLayoutContainer>可以使用。使用isFitContent的容器不会比内部子元素的大小更大。

警告

在这个示例中，如果给Mid Container isFitContent赋值
由于可移动空间的值小于可移动的空间值，因此将形成完全无法调整大小的布局。如果不是故意的，请不要给所有容器赋予最大大小值。至少一个容器的最大大小不应被赋予。

面板移动模式 (panelMovementMode)

调整大小时与相邻面板的交互方式

panelMovementMode是控制在调整大小时如何移动相邻面板的属性。默认值是 离婚，可以使用以下模式。

bulldozer

推开相邻面板，但彼此不粘附。

divorce (기본값)

推开相邻面板并彼此粘附，但如果返回到开始调整大小的位置，则会再次分开。

stalker

相邻面板完全粘附，但到达最末端时会再次分开。

tsx

const [mode, setMode] = useState<"bulldozer" | "divorce" | "stalker">("bulldozer");

<ButtonGroup variant="outlined" size="small">
  {["bulldozer", "divorce", "stalker"].map((m) => (
    <Button
      key={m}
      onClick={() => setMode(m)}
      variant={mode === m ? "contained" : "outlined"}
    >
      {m}
    </Button>
  ))}
</ButtonGroup>

<Box
  sx={{
    height: "100%",
    "& [data-container_name]": {
      minHeight: "2rem",
    },
  }}
>
  <FlexLayout
    layoutName={`panel-movement-demo-${mode}`}
    direction="column"
    panelMovementMode={mode}
  >
    <FlexLayoutContainer containerName="panel-top" isResizePanel>
      <div>Top</div>
    </FlexLayoutContainer>
    <FlexLayoutContainer containerName="panel-mid1" isResizePanel>
      <div>Mid 1</div>
    </FlexLayoutContainer>
    <FlexLayoutContainer containerName="panel-mid2" isResizePanel>
      <div>Mid 2</div>
    </FlexLayoutContainer>
    <FlexLayoutContainer containerName="panel-bottom">
      <div>Bottom</div>
    </FlexLayoutContainer>
  </FlexLayout>
</Box>

最后检查

layoutName / containerName

layoutName / containerName是渲染的DOM元素的 id，同时也用于 getLayoutInfos, useDecompositionLayout 等Hook中的内部Store/Subject的键。

值必须在页面内唯一。 唯一如果重复，内部键会冲突，导致调整大小/订阅对象混淆等意外行为。
值必须是唯一的。 稳定如果在每次渲染时更改或根据条件更改名称，现有状态/订阅可能会中断，并被视为“其他布局”。
建议避免空格/特殊字符，使用英文/数字及 -, _ 的值。
isResizePanel 使用时生成的派生标识符${ContainerName} + '_resize_panel' 。请保持容器命名的一致性和唯一性。

isResizePanel

容器的兄弟将渲染为 resize panel。

例如：在 Mid 和 Right 之间，resize panel 的所有权属于 Mid，但 resize panel 处理两侧的兄弟。

grow

明确指定特定容器的初始比例。

未指定 grow 的容器将均匀分配除指定 grow 之外的其余部分。

isFitContent

限制容器的大小不超过内部子元素的大小。

panelMovementMode

设置面板调整大小时与相邻面板的交互方式。

"推土机"：推开相邻面板但不粘附

"离婚"：推开相邻面板并粘附，但回弹时分离（默认值）

"跟踪者"：相邻面板完全粘附，但到达末端时分离