Flutter中能否定义TableRow的尺寸?
如何在Flutter中定义TableRow的尺寸?
Flutter 的 TableRow 本身没有直接设置宽高的属性,但可以通过以下几种方式间接控制它的尺寸:
1. 通过 TableCell 的子组件约束尺寸
你可以在 TableCell 的子组件外层包裹 SizedBox、Container 或 ConstrainedBox,直接指定宽高值,从而控制整个行的高度(或列的宽度)。
修改你的表头代码示例:
Table( border: TableBorder.all(color: Colors.white30), defaultVerticalAlignment: TableCellVerticalAlignment.middle, children: [ TableRow( decoration: BoxDecoration( color: Colors.blueGrey, borderRadius: BorderRadius.only( topLeft: Radius.circular(12), topRight: Radius.circular(12), ), ), children: [ for (var header in [ "Id produção", "Id funcionário", "Cod Referencia", "Quantidade", "Hora Incial", "Hora Final", "Obs" ]) TableCell( verticalAlignment: TableCellVerticalAlignment.middle, child: SizedBox( height: 60, // 强制设置表头行的高度 child: Padding( padding: const EdgeInsets.all(8.0), child: Text( header, style: TextStyle(color: Colors.white), textAlign: TextAlign.center, ), ), ), ), ], ), ], )
2. 给 Table 设置 columnWidths 控制列宽
如果需要控制行的整体宽度,可以通过 Table 的 columnWidths 属性为每一列指定固定宽度或自适应规则,TableRow 的宽度会自动适配列宽总和。
示例:
Table( border: TableBorder.all(color: Colors.white30), defaultVerticalAlignment: TableCellVerticalAlignment.middle, // 为每列设置固定宽度 columnWidths: const { 0: FixedColumnWidth(80), 1: FixedColumnWidth(100), 2: FixedColumnWidth(120), 3: FixedColumnWidth(90), 4: FixedColumnWidth(100), 5: FixedColumnWidth(100), 6: FlexColumnWidth(), // 剩余空间分配给最后一列 }, children: [ // 你的 TableRow 代码... ], )
3. 使用 ConstrainedBox 限制行的最大/最小尺寸
如果需要更灵活的约束,可以给 TableRow 的每个 TableCell 子组件添加 ConstrainedBox,设置最小/最大宽高:
TableCell( child: ConstrainedBox( constraints: BoxConstraints( minHeight: 50, maxHeight: 70, minWidth: 80, ), child: Padding( padding: const EdgeInsets.all(8.0), child: Text(header), ), ), )
内容的提问来源于stack exchange,提问作者Marques960
相关产品推荐
相关产品推荐

