渲染时嵌套的ListView.Builder失败-Flutter [英] Nested ListView.Builder fails while rendering - Flutter

问题描述

我正在尝试使用Flutter应用程序来制作小型游戏 我有一个List<List<ColumnData>> gameBoard，其中ColumnData是本地定义的类. 该列表应该是三角形格式的二维列表 例如对于级别为3的列表将如下所示:

I am trying a flutter app to build a small game I have a List<List<ColumnData>> gameBoard where ColumnData is a locally defined class. The list is supposed to be a 2-D list in triangle format e.g. for a level as 3 the list will look like:

[00]
[10] [11]
[20] [21] [22]

[00]
[10][11]
[20][21][22]

我的模拟代码是:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}
class ColumnData {
  int _rowIdx;
  int _colIdx;
  String _data;
  Widget _column;

  ColumnData({String data, int row, int col}) {
    _data = data;
    _rowIdx = row;
    _colIdx = col;
    _column = new InkWell(
      child: new Container(
        margin: new EdgeInsets.all(10.0),
        child: new SizedBox(width: 30.0, height: 30.0,
          child: new Text(_data, textAlign: TextAlign.center),
        ),
        decoration: new BoxDecoration(
          border: new Border.all(color: Colors.indigoAccent, width: 2.0),
          shape: BoxShape.rectangle,
        ),
      ),
    );
  }
  set data(String value) => _data=value;
  set colIdx(int value) => _colIdx=value;
  set rowIdx(int value) => _rowIdx=value;
  Widget get column => _column;
  String get data => _data;
  int get colIdx => _colIdx;
  int get rowIdx => _rowIdx;
  String toString(){
    return ('Row: ${_rowIdx} Col: ${_colIdx} Data: $_data');
  }
}

class _MyHomePageState extends State<MyHomePage> {
  List<List<ColumnData>> gameBoard = new List(3);

  @override
  void initState() {
    super.initState();
    print('Lets build matrix');
    initGame();
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(body: _buildBody());
  }

  Widget _buildBody() {
    return  new ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: gameBoard.length,
      shrinkWrap: true,
      itemBuilder: (BuildContext ctx, int rowIdx){
        return new ListView.builder(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          itemCount: gameBoard[rowIdx].length,
          itemBuilder: (BuildContext ctx, int colIdx){
            return gameBoard[rowIdx][colIdx].column;
          },
        );
      },
    );
  }

  initGame(){
    List<ColumnData> row1Data = [];
    List<ColumnData> row2Data = [];
    List<ColumnData> row3Data = [];
    ColumnData colData00 = new ColumnData(row: 0, col: 0, data: '7');
    row1Data.add(colData00);
    gameBoard[0] =row1Data;
    ColumnData colData10 = new ColumnData(row: 1, col: 0, data: '5');
    ColumnData colData11 = new ColumnData(row: 1, col: 1, data: '2');
    row2Data.add(colData10);
    row2Data.add(colData11);
    gameBoard[1]= row2Data;
    ColumnData colData20 = new ColumnData(row: 2, col: 0, data: '3');
    ColumnData colData21 = new ColumnData(row: 2, col: 1, data: '2');
    ColumnData colData22 = new ColumnData(row: 2, col: 2, data: '0');
    row3Data.add(colData20);
    row3Data.add(colData21);
    row3Data.add(colData22);
    gameBoard[2] = row3Data;
    print(gameBoard);
  }

}

我得到的错误摘要是:

I/flutter (21273): [[Row: 0 Col: 0 Data: 7], [Row: 1 Col: 0 Data: 5, Row: 1 Col: 1 Data: 2], [Row: 2 Col: 0 Data: 3, Row: 2 Col: 1 Data: 2, Row: 2 Col: 2 Data: 0]]
Restarted app in 9,341ms.
I/flutter (21273): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (21273): The following assertion was thrown during performLayout():
I/flutter (21273): 'package:flutter/src/rendering/viewport.dart': Failed assertion: line 1283 pos 16:
I/flutter (21273): 'constraints.hasBoundedWidth': is not true. 
I/flutter (21273): Either the assertion indicates an error in the framework itself, or we should provide substantially
I/flutter (21273): more information in this error message to help you determine and fix the underlying cause.
I/flutter (21273): In either case, please report this assertion by filing a bug on GitHub: 
I/flutter (21273):   https://github.com/flutter/flutter/issues/new
I/flutter (21273): When the exception was thrown, this was the stack:
I/flutter (21273): #2      RenderShrinkWrappingViewport.performLayout (package:flutter/src/rendering/viewport.dart)
I/flutter (21273): #3      RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
......

我尝试了不使用收缩包装，也尝试使用行和列 但没有成功

I have tried without shrinkwrap and also by using rows and columns but no success

我到底在做什么错? 我可以探索其他任何变化吗? 构建二维矩阵的任何其他解决方法/想法

What exactly am I doing wrong? Any other variations that I can explore? Any other work-around/idea to build the 2-D matrix

任何指针欢迎

致谢

推荐答案

由于我的游戏区域具有有限数量的行和列(根据所选的关卡和其他一些参数设计)，因此我可以通过以下方式实现布局:

Since my game area had finite numbers of rows and columns (designed based on level selected and some other parameters), I was able to achieve my layout with following:

Widget _buildBody() {
    List<Widget> rows = new List<Widget>(gameBoard.length);
    for (int i=0;i<gameBoard.length; i++){
      List<Widget> cols = new List<Widget>(gameBoard[i].length);
      for(int j=0; j<gameBoard[i].length; j++){
        cols[j] = gameBoard[i][j].column;
      }
      rows[i] = new Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: cols,
      );
    }

    return new Container(
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: rows,
      ),
    );
}

此后输出为

这篇关于渲染时嵌套的ListView.Builder失败-Flutter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！