Flutter列表Widget内路由跳转问题：context无法访问（第41行报错）

问题原因 #

你的_widgetOptions是静态列表，静态成员无法访问State类实例的context，且列表初始化时还没有可用的BuildContext，导致直接调用Navigator.push时传入的context报错。

三种可行解决方案 #

方案1：将静态列表改为非静态，在build方法中初始化

去掉_widgetOptions的static修饰符，改用late延迟初始化，然后在build方法中创建列表，直接使用build方法提供的context：

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  // 去掉static，用late延迟初始化
  late List<Widget> _widgetOptions;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    // 在build方法中初始化列表，此时可直接使用context
    _widgetOptions = <Widget>[
      Container(
        child: ElevatedButton(
          child: const Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondRoute()),
            );
          },
        ),
      ),
      Text(
        'Index 1: Business',
        style: optionStyle,
      ),
      Text(
        'Index 2: School',
        style: optionStyle,
      ),
    ];

    return Scaffold(
      // 原有Scaffold代码保持不变
    );
  }
}

方案2：将带跳转按钮的Widget抽成独立组件

把需要跳转的第一个选项抽成单独的StatelessWidget，在组件内部的build方法中获取context：

// 新增独立组件
class HomeRouteButton extends StatelessWidget {
  const HomeRouteButton({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ElevatedButton(
        child: const Text('Open route'),
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => const SecondRoute()),
          );
        },
      ),
    );
  }
}

// 修改原State类中的_widgetOptions
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static List<Widget> _widgetOptions = <Widget>[
    const HomeRouteButton(), // 使用抽离的组件
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];

  // 其他代码保持不变
}

方案3：用Builder Widget包裹需要context的组件

通过Builder组件获取当前上下文，无需修改列表的静态属性：

static List<Widget> _widgetOptions = <Widget>[
  // 用Builder包裹，builder函数会传入可用的context
  Builder(
    builder: (context) => Container(
      child: ElevatedButton(
        child: const Text('Open route'),
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => const SecondRoute()),
          );
        },
      ),
    ),
  ),
  Text(
    'Index 1: Business',
    style: optionStyle,
  ),
  Text(
    'Index 2: School',
    style: optionStyle,
  ),
];

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