Flutter列表关联if-else报错求助：索引越界问题排查

Hey Peter，我一眼就揪出问题所在啦！

问题根源 #

你碰到的索引错误，核心是数组索引的判断条件写错了。Dart里数组的索引是从0开始计数的：

• 你的bodytext数组有3个元素，对应的有效索引是0、1、2
• 数组的length属性返回的是元素总数，也就是3

当你点击按钮第3次后，bodyTextIndex会变成3，这时候你的判断条件bodyTextIndex <= bodytext.length会成立（3 <= 3），代码会执行前面的Column分支，然后尝试访问bodytext[3]——但这个索引根本不存在，自然就触发了数组越界错误！

修复方案 #

把判断条件从<=改成<，这样当bodyTextIndex等于数组长度（没有有效元素可访问时），就会自动进入else分支显示"HELLO"：

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text(
          'TASK',
        ),
      ),
      // 这里把 <= 替换成 <
      body: bodyTextIndex < bodytext.length ? Column(
        children: [
          BodyTextChance(
            bodytext[bodyTextIndex],
          ),
          FlatButton(
            onPressed: buttonPress,
            child: Text(
              'CLICK ME',
            ),
          ),
        ],
      ) : Center(
        child: Text('HELLO'),
      ),
    ),
  );
}

额外小建议 #

顺便提一句，Flutter官方已经把FlatButton标记为过时组件了，你可以换成TextButton来保持代码的兼容性，用法几乎一致：

TextButton(
  onPressed: buttonPress,
  child: Text('CLICK ME'),
)

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