Flutter自定义导航新增第4页触发RangeError索引越界问题求助

问题根因 #

你代码里的pageKeys列表定义存在语法错误，同时还有一处返回逻辑的索引错误：

1. 错误的将Page3和Page4写在了同一个字符串内，导致pageKeys实际长度只有3：

// 错误写法
List<String> pageKeys = ["Page1", "Page2", "Page3, Page4"];

此时索引2对应的是值为Page3, Page4的无效页面key，索引3超出了列表最大长度（最大索引为2），所以会触发索引越界错误，同时点击第3个tab时匹配不到对应页面，导致无法渲染内容。
2. WillPopScope的返回逻辑中，跳转回Page1时传入的索引错误，Page1对应的索引是0不是1，否则返回时会错误跳转到Page2。

修复方案 #

1. 修正pageKeys定义 #

将Page3和Page4拆分为独立的字符串元素：

List<String> pageKeys = ["Page1", "Page2", "Page3", "Page4"];

2. 修正返回逻辑的索引值 #

修改WillPopScope内的_selectTab调用参数：

// 错误写法
_selectTab("Page1", 1);
// 修正后
_selectTab("Page1", 0);

修改完成后索引越界、Page3无法渲染的问题都会解决。

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