Flutter Table大小失败

Question

我需要创建一个包含数字的正方形表格。显而易见的解决方案是使用小部件Table，但是。。。

当我使用奇数大小时，它可以工作，当我使用偶数大小时，由于渲染异常而失败。

如何修复？

void main() => runApp(
MaterialApp(
home: Scaffold(
appBar: new AppBar(title: Text("Table Shulte")),
body: tab(),
)
)
);
Widget tab(){
int N = 6;  
Widget table = Table(
children: List.generate(N, (i){
return TableRow(children: List.generate(N, (j) =>
AspectRatio(child:Center(child: Text("${i*N+j+1}", textScaleFactor: 12.0/N,)), aspectRatio: 1.0,)
));
}),
border: TableBorder.all(),
);
return table;
}

我不明白为什么这个断言失败了：

"package:flatt/src/rendering/table.dart"：断言失败：第883行位置16："tableWidth>=targetWidth"：不为true。

引发了另一个异常："package:flutter/src/rerendering/table.dart"：失败的断言：行1126位置12:"_rowTops.length==rows+1"：不为true。

这是日志。

I/flutter (10304): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (10304): The following assertion was thrown during performLayout():
I/flutter (10304): 'package:flutter/src/rendering/table.dart': Failed assertion: line 883 pos 16: 'tableWidth >=
I/flutter (10304): targetWidth': is not true.

I/flutter (10304): When the exception was thrown, this was the stack:
I/flutter (10304): #2      RenderTable._computeColumnWidths (package:flutter/src/rendering/table.dart)
I/flutter (10304): #3      RenderTable.performLayout (package:flutter/src/rendering/table.dart:1001:33)
I/flutter (10304): #4      RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (10304): #5      MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:141:11)
I/flutter (10304): #6      _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:399:7)
I/flutter (10304): #7      MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:211:7)
I/flutter (10304): #8      RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:355:14)
I/flutter (10304): #9      RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (10304): #10     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13)
I/flutter (10304): #11     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (10304): #12     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13)
I/flutter (10304): #13     _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1143:11)
I/flutter (10304): #14     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (10304): #15     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13)
I/flutter (10304): #16     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (10304): #17     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13)

I/flutter (10304): This RenderObject had the following descendants (showing up to depth 5):
I/flutter (10304):   RenderAspectRatio#eecef NEEDS-LAYOUT NEEDS-PAINT
I/flutter (10304):     RenderPositionedBox#1f1ff NEEDS-LAYOUT NEEDS-PAINT
I/flutter (10304):       RenderParagraph#8f8f7 NEEDS-LAYOUT NEEDS-PAINT

I/flutter (10304): Another exception was thrown: RenderBox was not laid out: RenderTable#babed relayoutBoundary=up1 NEEDS-PAINT
I/flutter (10304): Another exception was thrown: 'package:flutter/src/rendering/table.dart': Failed assertion: line 1126 pos 12: '_rowTops.length == rows + 1': is not true.

Answer 1

导致问题的问题是textScaleFactor。

List.generate(index，…(方法从(0(开始索引。

当我们调用textScaleFactor: 12.0/N时，它没有返回小部件的编号，因此会导致问题。

我只是简单地修改了您的选项卡方法，如下所示，它现在返回一个视图。

Widget tab(){
int N = 6;
Widget table = Table(
children: List.generate(N, (i){
return TableRow(children: List.generate(N+1, (j) =>
AspectRatio(child:Center(child: Text("${i*N+j+1}", textScaleFactor: 12.0/N)), aspectRatio: 1.0)
));
}),
border: TableBorder.all(),
);
return table;
}