Flutter中RangeError(index)索引错误排查与解决求助

这个错误的核心原因是你尝试访问一个空列表/数组的索引0——当你的数据源（比如页面列表、标题列表）是空的时候，直接通过[0]去取值就会触发这个报错。

修复步骤： #

• 检查数据源初始化状态
  找到TabsScreen里的页面列表（比如pages）、标题列表（比如titles），确保它们至少包含一个元素，不要是空列表：

  // 错误写法：空列表
  final List<Widget> pages = [];
  // 正确写法：初始化至少一个元素
  final List<Widget> pages = [HomeScreen()];
  

• 增加空值判断，避免越界
  如果你的数据源可能在某些场景下为空，必须在访问索引前做判断：

  1. 标题取值时加判断：

     // 替代直接取titles[0]的写法
     Text(titles.isEmpty ? '默认标题' : titles[_selectedPageIndex])
     

  2. 页面渲染时加判断：

     body: pages.isEmpty 
         ? const Center(child: Text('暂无内容')) 
         : pages[_selectedPageIndex],
     

  3. 切换tab时限制索引范围：

     void _selectPage(int index) {
       setState(() {
         if (index >= 0 && index < pages.length) {
           _selectedPageIndex = index;
         }
       });
     }
     

• 关于索引的疑问
  数字索引本身没有问题，但前提是列表长度要大于你访问的索引值。如果你的title是用Map存储的（比如Map<String, String>），那['title']是键值访问，不是索引——这种情况要检查Map里是否存在'title'这个键，或者用titleMap['title'] ?? '默认值'来避免空值。

完整修复示例 #

class TabsScreen extends StatefulWidget {
  const TabsScreen({super.key});

  @override
  State<TabsScreen> createState() => _TabsScreenState();
}

class _TabsScreenState extends State<TabsScreen> {
  // 初始化非空的页面和标题列表
  final List<Widget> _pages = const [
    HomeScreen(),
    SettingsScreen(),
  ];
  final List<String> _pageTitles = const [
    '首页',
    '设置',
  ];
  int _selectedPageIndex = 0;

  void _selectPage(int index) {
    setState(() {
      // 限制索引在有效范围内
      if (index >= 0 && index < _pages.length) {
        _selectedPageIndex = index;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // 处理空列表情况
        title: Text(_pageTitles.isEmpty ? '默认标题' : _pageTitles[_selectedPageIndex]),
      ),
      body: _pages.isEmpty 
          ? const Center(child: Text('暂无页面')) 
          : _pages[_selectedPageIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: _selectPage,
        currentIndex: _selectedPageIndex,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: '设置',
          ),
        ],
      ),
    );
  }
}

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