时间戳

首页 > 解决方案 > 颤振表大小失败

flutter - 颤振表大小失败

问题描述

我需要创建包含数字并具有方形的表格。显而易见的解决方案是使用小部件表，但是......

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

如何解决？

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': Failed assertion: line 1126 pos 12: '_rowTops.length == rows + 1': is not 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.

标签： flutterflutter-table

解决方案

导致该问题的问题是 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;
}

推荐阅读