Flutter中如何调用AdvancedSegment的onValueChanged实现类标签栏页面切换

你当前的写法错误点在于：onValueChanged 是选中值变化时的回调函数，你在回调里直接返回页面组件不会生效，该回调只负责响应选中状态变更，你需要通过更新状态变量、触发组件重建来切换显示的页面。

修改步骤 #

• 确认当前承载组件是StatefulWidget，需要依赖状态更新触发UI重建
• 修改onValueChanged回调逻辑，更新选中值并触发状态刷新
• 在布局的内容区域，根据当前选中的_value动态渲染对应的页面组件

完整代码示例 #

final _segments = <String, String>{
  'freelancher': 'Freelancer',
  'employer': 'Employer',
};
var _value = 'freelancher';

// 外层布局示例，将分段控件和内容区域放在同一棵组件树中
@override
Widget build(BuildContext context) {
  return Column(
    children: [
      AdvancedSegment(
        sliderOffset: 5,
        sliderColor: Colors.white,
        backgroundColor: Colors.white24,
        shadow: [
          BoxShadow(
            color: Colors.transparent,
          ),
        ],
        activeStyle: TextStyle(
          fontFamily: AppTheme.medium,
          color: AppTheme.primaryColor,
        ),
        inactiveStyle: TextStyle(
          fontFamily: AppTheme.medium,
          color: AppTheme.white,
        ),
        itemPadding: EdgeInsets.symmetric(
          horizontal: 45,
          vertical: 10,
        ),
        segments: _segments,
        controller: _advanceC,
        // 修改后的回调逻辑
        onValueChanged: (value) {
          setState(() {
            _value = value;
          });
        },
        value: _value,
      ),
      // 动态切换的内容区域
      Expanded(
        child: _value == 'freelancher' ? ChatPage() : ProfilePage(),
      )
    ],
  );
}

可选优化 #

如果希望切换页面时保留之前的页面状态，不需要每次重建，可以用IndexedStack替代直接的三元判断：

Expanded(
  child: IndexedStack(
    index: _value == 'freelancher' ? 0 : 1,
    children: const [
      ChatPage(),
      ProfilePage(),
    ],
  ),
)

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