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：flutter / src / rendering / table.dart'：失败的断言：883行pos 16：'tableWidth> = targetWidth'：不正确。

引发了另一个异常：'package：flutter / src / rendering / table.dart'：断言失败：行1126位置12：'_rowTops.length ==行+ 1'：不正确。

这里是日志。

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时，未为小部件返回数字，因此会导致问题。

我简单地如下修改了tab方法，它现在返回一个视图。

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;
}

颤动表大小失败

1 个答案: