Flutter中useEffect未响应LayoutBuilder的min/max值更新问题

问题出在你对minSize和maxSize的赋值方式上——你直接给普通变量赋值，这类变量不属于可监听的状态，useEffect的依赖数组无法感知到它们的变化，所以只会在初始时执行一次。

修改步骤： #

1. 将minSize和maxSize改为可监听的状态变量（使用useState）：

   final [minSize, setMinSize] = useState(0.0);
   final [maxSize, setMaxSize] = useState(0.0);
   

2. 在LayoutBuilder的builder回调中更新状态：

   return LayoutBuilder(
     builder: (context, constraints) {
       setMinSize(constraints.minHeight);
       setMaxSize(constraints.maxHeight);
       // ... 其他原有代码
     }
   );
   

3. 保持原有的useEffect逻辑不变：

   useEffect(() => setSize(min: minSize, max: maxSize), [minSize, maxSize]);
   

原理说明： #

改成useState后，minSize和maxSize成为了可被Hooks追踪的状态变量。每当LayoutBuilder的约束变化时，调用setMinSize/setMaxSize会触发组件状态更新，此时useEffect的依赖数组检测到值变化，就会重新执行回调调用setSize。另外LayoutBuilder的builder回调只会在布局约束改变时触发，不用担心频繁更新状态带来的性能问题。

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