Flutter StaggeredGridView传参报错：未定义名称'viewModel'

问题描述 #

构建StaggeredGridView时，在Material组件的点击回调里调用showMainDialog，触发了Undefined name 'viewModel'错误，具体报错信息：

Error: The getter 'viewModel' isn't defined for the class '_MainPageState'.

问题根源是Items方法的作用域内没有viewModel变量，需要通过参数转发传递该变量。

相关代码 #

Material Items(IconData icon, String heading, Color cColor) {
    return Material(
        child: InkWell(
          onTap: () {
            if (heading == ('Text')) {
                  showMainDialog(context, viewModel); // 错误位置
            } else if (heading == ('Text1')) {
                  showMainDialog(context, viewModel); // 错误位置
            }
          },
          child: Center(
            child: Container(
              child: Column(
                    children: <Widget>[
                      Expanded(
                        child: Container(
                          child: Icon(
                            icon,
                            color: cColor,
                          ),
                        ),
                      ),
                      Expanded(    
                        child: Padding(
                          padding: EdgeInsets.only(top:10),
                          child: Text(
                            heading,
                            softWrap: true,
                          ),
                        ),
                      )
                    ],
                  )
            ),
          ),
        ));
  }

  Widget loadMainPage(ViewModel viewModel) {
    return StaggeredGridView.count(
        shrinkWrap: true,
        crossAxisCount: 2,
        crossAxisSpacing: 12.0,
        mainAxisSpacing: 12.0,
        children: <Widget>[
          Items(Icons.add, ('Text'), Colors.green),
          Items(Icons.add, ('Text1'), Colors.red),
        ],
        staggeredTiles: [
          StaggeredTile.extent(1, 150.0),
          StaggeredTile.extent(1, 150.0),
        ],
      );
  }

解决方案 #

通过参数传递将loadMainPage中的viewModel转发给Items方法，具体步骤：

1. 修改Items方法的参数列表，添加ViewModel viewModel：

Material Items(IconData icon, String heading, Color cColor, ViewModel viewModel) {

2. 在loadMainPage调用Items时传入viewModel：

Items(Icons.add, ('Text'), Colors.green, viewModel),
Items(Icons.add, ('Text1'), Colors.red, viewModel),

3. 在点击回调中使用传入的viewModel：

if (heading == ('Text')) {
  showMainDialog(context, viewModel);
} else if (heading == ('Text1')) {
  showMainDialog(context, viewModel);
}

修改后的完整代码片段 #

Material Items(IconData icon, String heading, Color cColor, ViewModel viewModel) {
    return Material(
        child: InkWell(
          onTap: () {
            if (heading == ('Text')) {
                  showMainDialog(context, viewModel);
            } else if (heading == ('Text1')) {
                  showMainDialog(context, viewModel);
            }
          },
          child: Center(
            child: Container(
              child: Column(
                    children: <Widget>[
                      Expanded(
                        child: Container(
                          child: Icon(
                            icon,
                            color: cColor,
                          ),
                        ),
                      ),
                      Expanded(    
                        child: Padding(
                          padding: EdgeInsets.only(top:10),
                          child: Text(
                            heading,
                            softWrap: true,
                          ),
                        ),
                      )
                    ],
                  )
            ),
          ),
        ));
  }

  Widget loadMainPage(ViewModel viewModel) {
    return StaggeredGridView.count(
        shrinkWrap: true,
        crossAxisCount: 2,
        crossAxisSpacing: 12.0,
        mainAxisSpacing: 12.0,
        children: <Widget>[
          Items(Icons.add, ('Text'), Colors.green, viewModel),
          Items(Icons.add, ('Text1'), Colors.red, viewModel),
        ],
        staggeredTiles: [
          StaggeredTile.extent(1, 150.0),
          StaggeredTile.extent(1, 150.0),
        ],
      );
  }

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