Flutter获取屏幕尺寸设置Tab宽度：Debug正常Release适配异常

问题场景 #

通过计算屏幕宽度设置Tab自适应宽度，Debug模式下显示正常，但Release模式中Tab始终处于可滚动状态且宽度过大，已设置TabBar.isScrollable = true。

相关代码片段：

final double screenWidth = Data.screen.width;

@override
void initState() {
  super.initState();
  _tabController = TabController(vsync: this, length: 4);
  _tabController.addListener(_handleTabSelection);
  tabWidth = screenWidth / 4.8;
}

@override
Widget build(BuildContext context) {
  List<Widget> myTabs = [
    const HomePageTab(
      icon: Icons.groups_rounded,
    ),
    SizedBox(
      width: tabWidth,
      child: const HomePageTab(
        title: 'Chats',
      ),
    ),
    SizedBox(
      width: tabWidth,
      child: const HomePageTab(
        title: 'Status',
      ),
    ),
    SizedBox(
      width: tabWidth,
      child: const HomePageTab(
        title: 'Calls',
      ),
    ),
  ];
  // 其余build代码
}

效果对比：

• Release模式效果：
  
• Debug模式效果：
  

问题原因 #

1. initState阶段获取尺寸不准确：initState执行时Widget尚未完成挂载，此时通过全局Data.screen.width获取的屏幕宽度，在Release模式的优化渲染流程下，无法匹配当前上下文的真实可用宽度，导致计算出的tabWidth偏大。
2. Tab宽度不统一：第一个Tab未设置固定宽度，与其他三个带固定宽度的Tab组合时，布局逻辑在Release模式下的表现与Debug模式产生差异，加剧宽度异常。

解决方法 #

方法一：在build中通过MediaQuery获取实时宽度 #

将宽度计算移至build方法内，利用MediaQuery获取当前上下文的准确屏幕尺寸，确保计算出的tabWidth适配当前布局环境：

@override
Widget build(BuildContext context) {
  // 在build内获取实时屏幕宽度
  final double screenWidth = MediaQuery.of(context).size.width;
  final double tabWidth = screenWidth / 4.8;
  
  List<Widget> myTabs = [
    // 给第一个Tab也设置统一宽度
    SizedBox(
      width: tabWidth,
      child: const HomePageTab(
        icon: Icons.groups_rounded,
      ),
    ),
    SizedBox(
      width: tabWidth,
      child: const HomePageTab(
        title: 'Chats',
      ),
    ),
    SizedBox(
      width: tabWidth,
      child: const HomePageTab(
        title: 'Status',
      ),
    ),
    SizedBox(
      width: tabWidth,
      child: const HomePageTab(
        title: 'Calls',
      ),
    ),
  ];
  
  // 后续Scaffold及TabBar代码
  return Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        controller: _tabController,
        isScrollable: true,
        tabs: myTabs,
      ),
    ),
    // ...
  );
}

方法二：使用LayoutBuilder获取父容器可用宽度 #

如果TabBar的宽度并非全屏，使用LayoutBuilder可以更精准地获取父容器的可用宽度，避免全局屏幕尺寸带来的误差：

@override
Widget build(BuildContext context) {
  return LayoutBuilder(
    builder: (context, constraints) {
      // 获取父容器的最大可用宽度
      final double tabWidth = constraints.maxWidth / 4.8;
      
      List<Widget> myTabs = [
        SizedBox(
          width: tabWidth,
          child: const HomePageTab(
            icon: Icons.groups_rounded,
          ),
        ),
        SizedBox(
          width: tabWidth,
          child: const HomePageTab(
            title: 'Chats',
          ),
        ),
        SizedBox(
          width: tabWidth,
          child: const HomePageTab(
            title: 'Status',
          ),
        ),
        SizedBox(
          width: tabWidth,
          child: const HomePageTab(
            title: 'Calls',
          ),
        ),
      ];
      
      return Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            controller: _tabController,
            isScrollable: true,
            tabs: myTabs,
          ),
        ),
        body: TabBarView(
          controller: _tabController,
          children: [...],
        ),
      );
    },
  );
}

额外注意点 #

• 确保所有Tab使用统一的宽度设置，避免布局逻辑出现不一致；
• 如果使用全局Data.screen存储尺寸，需添加屏幕尺寸变化的监听（如WidgetsBinding.instance.addPostFrameCallback或窗口 resize 监听），确保在Release模式下能实时更新尺寸。

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