Flutter：根据Wrap组件换行状态添加Divider组件

方法一：通过DOM位置判断是否换行 #

核心思路是对比Wrap容器和Availability组件的垂直偏移量，若两者offsetTop不同，说明组件换行了。

import { useState, useEffect, useRef } from 'react';
import { Wrap, VerticalDivider, Divider, Availability } from 'your-ui-library';

function LayoutComponent() {
  const wrapRef = useRef(null);
  const availabilityRef = useRef(null);
  const [isNewLine, setIsNewLine] = useState(false);

  const checkLineStatus = () => {
    if (!wrapRef.current || !availabilityRef.current) return;
    const wrapTop = wrapRef.current.offsetTop;
    const compTop = availabilityRef.current.offsetTop;
    setIsNewLine(wrapTop !== compTop);
  };

  useEffect(() => {
    checkLineStatus();
    window.addEventListener('resize', checkLineStatus);
    return () => window.removeEventListener('resize', checkLineStatus);
  }, []);

  return (
    <Wrap ref={wrapRef}>
      {/* 前置子组件 */}
      <Availability ref={availabilityRef} />
      {isNewLine ? <Divider /> : <VerticalDivider />}
    </Wrap>
  );
}

方法二：固定断点的媒体查询 #

如果你的布局有明确的大屏/小屏断点（比如大屏为≥1200px），可以直接用媒体查询钩子快速实现：

import { useMediaQuery } from '@mui/material'; // 以Material UI为例，其他UI库类似

function LayoutComponent() {
  const isLargeScreen = useMediaQuery('(min-width: 1200px)');

  return (
    <Wrap>
      {/* 前置子组件 */}
      <Availability />
      {isLargeScreen ? <VerticalDivider /> : <Divider />}
    </Wrap>
  );
}

这种方式简单高效，但仅适用于布局断点固定的场景，无法适配Wrap容器自身宽度动态变化的情况。

方法三：ResizeObserver监听容器宽度 #

如果Wrap容器宽度不固定，可通过监听容器宽度，对比所有子组件总宽度与容器宽度的大小，判断是否会换行：

import { useState, useEffect, useRef } from 'react';
import { Wrap, VerticalDivider, Divider, Availability } from 'your-ui-library';

function LayoutComponent() {
  const wrapRef = useRef(null);
  const childRefs = useRef([]);
  const [isNewLine, setIsNewLine] = useState(false);

  const checkWrapStatus = () => {
    if (!wrapRef.current) return;
    const containerWidth = wrapRef.current.offsetWidth;
    const totalChildWidth = Array.from(childRefs.current)
      .reduce((sum, el) => sum + el.offsetWidth, 0);
    setIsNewLine(totalChildWidth > containerWidth);
  };

  useEffect(() => {
    const observer = new ResizeObserver(checkWrapStatus);
    if (wrapRef.current) observer.observe(wrapRef.current);
    checkWrapStatus();
    return () => observer.disconnect();
  }, []);

  return (
    <Wrap ref={wrapRef}>
      <div ref={el => childRefs.current[0] = el}>前置组件</div>
      <Availability ref={el => childRefs.current[1] = el} />
      {isNewLine ? <Divider /> : <VerticalDivider />}
    </Wrap>
  );
}

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