Flutter中Pluto_layout标签页内容无法更新，求解决方案

核心原因 #

你使用tabViewWidget传入固定Widget的方式，PlutoLayout会缓存这个Widget实例，不会随父组件的setState重新构建，所以界面无法更新。正确做法是用tabViewBuilder动态构建标签内容。

解决步骤 #

• 将tabViewWidget替换为tabViewBuilder，在builder函数内返回计数器组件
• 确保PlutoLayoutTabs的items列表未被const修饰，让setState触发时能重新生成items列表

修改后的代码示例 #

left: PlutoLayoutContainer(
  child: PlutoLayoutTabs(
    items: [
      PlutoLayoutTabItem(
        id: 'left1',
        title: 'left1',
        // 用tabViewBuilder替代tabViewWidget
        tabViewBuilder: (context) => Column(
          children: [
            Text('number of times clicked: ${counter}'),
            TextButton(
              onPressed: () {
                setState(() {
                  counter++;
                  print(counter);
                });
              },
              child: const Text('click'),
            ),
          ],
        ),
      ),
    ],
  ),
),

补充说明 #

tabViewBuilder是一个回调函数，每次PlutoLayout需要渲染标签内容时都会调用它。当父组件setState更新counter后，builder会重新执行，生成带有最新counter值的新Widget，界面就能正常更新了。

内容的提问来源于stack exchange，提问作者Knöt