Flutter实现底部导航栏时ListView.builder报错的问题咨询

我参照Flutter官方文档实现简单底部导航栏时，在ListView.builder处报错。已尝试给ListView.builder添加Expanded组件，但问题未解决。VSCode提示该列表被声明为const，而ListView是动态组件。想问将ListView封装为独立组件后加入列表能否解决问题？

相关代码：

List<RouteItem> items = [];
  String _server = '';
  late SharedPreferences _prefs;

  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
      Expanded(
        child: ListView.builder(
          shrinkWrap: true,
          padding: const EdgeInsets.all(0.0),
          itemCount: items.length,
          itemBuilder: (context, i) {
            return _buildRow(context, items[i]);
          }
        ),
      ),
      MyWidgetTwo(),
      Text(
        'SomeText',
        style: optionStyle,
      ),
  ];

问题根源 #

核心问题是**_widgetOptions被声明为static const列表，但其中的ListView.builder依赖动态变量items，同时_buildRow也是非静态方法**——const列表要求所有子组件必须是编译时常量，动态依赖的组件无法满足这个条件，这才是报错的根本原因，和Expanded无关。

解决方案 #

1. 封装为独立组件（可行）

把包含ListView.builder的部分封装成StatefulWidget（因为依赖items这个动态状态），然后将这个组件加入_widgetOptions列表，完全可以解决问题：

class RouteListWidget extends StatefulWidget {
  final List<RouteItem> items;
  const RouteListWidget({Key? key, required this.items}) : super(key: key);

  @override
  State<RouteListWidget> createState() => _RouteListWidgetState();
}

class _RouteListWidgetState extends State<RouteListWidget> {
  Widget _buildRow(BuildContext context, RouteItem item) {
    // 替换为你原有的_buildRow实现代码
    return ListTile(title: Text(item.title));
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: ListView.builder(
        shrinkWrap: true,
        padding: const EdgeInsets.all(0.0),
        itemCount: widget.items.length,
        itemBuilder: (context, i) {
          return _buildRow(context, widget.items[i]);
        },
      ),
    );
  }
}

之后修改_widgetOptions：

// 去掉const，改为方法传入动态items
static List<Widget> _widgetOptions(List<RouteItem> items) => <Widget>[
      RouteListWidget(items: items),
      MyWidgetTwo(),
      Text(
        'SomeText',
        style: optionStyle,
      ),
  ];

2. 直接移除const修饰符（更简单）

如果不需要_widgetOptions是编译时常量，直接去掉static const，改成实例getter方法：

List<Widget> get _widgetOptions => <Widget>[
      Expanded(
        child: ListView.builder(
          shrinkWrap: true,
          padding: const EdgeInsets.all(0.0),
          itemCount: items.length,
          itemBuilder: (context, i) {
            return _buildRow(context, items[i]);
          },
        ),
      ),
      MyWidgetTwo(),
      Text(
        'SomeText',
        style: optionStyle,
      ),
  ];

这样动态依赖的items和_buildRow就能正常被调用，不会再触发const相关的报错。

总结 #

• 封装独立组件是可行方案，适合逻辑复杂、需要复用的场景；
• 直接移除const是更快捷的解决方式，适合简单场景。

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