渲染时嵌套的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屋!