You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter Table组件如何拆分底部行？需分为超时时间与停止时间

avatar
云上老周
2026-8-6
Flutter Table组件实现底部行拆分为上下两行需求

我用Flutter的Table组件创建了一个多列表格，现在需要把表格底部的行拆分为上下两行：上方行对应“超时时间（timeout time）”，下方行对应“停止时间（stop time）”，尝试查找资料后未找到实现方法，寻求解决方案。

现有代码 

Container(
margin: EdgeInsets.only(top: 10,right: 310),
child: Table(
columnWidths: {
0: FlexColumnWidth(24),
1: FlexColumnWidth(12),
2: FlexColumnWidth(12),
},
border: TableBorder.all(
color: Colors.black, style: BorderStyle.solid, width: 2),
children: [
TableRow(
children: [
Container(
padding: EdgeInsets.only(top: 14,left: 4),
height: 50,
color: Colors.cyan,
child: Column(children: [
Text(
'Layer No',
style: TextStyle(fontSize: 20),
)
]),
),
Container(
height: 50,
color: Colors.white,
child: Container(
padding: EdgeInsets.only(top: 15),
color: Colors.white,
child: Column(children: [
Text(
'1',
style: TextStyle(fontSize: 20),
)
]),
),
),
Container(
height: 50,
color: Colors.white,
child: Container(
padding: EdgeInsets.only(top: 15),
color: Colors.white,
child: Column(children: [
Text(
'2',
style: TextStyle(fontSize: 20),
)
]),
),
),
Container(
height: 50,
color: Colors.white,
child: Container(
padding: EdgeInsets.only(top: 15),
color: Colors.white,
child: Column(children: [
Text(
'3',
style: TextStyle(fontSize: 20),
)
]),
),
),


],
),
TableRow(
children: [
Container(
padding: EdgeInsets.only(top: 15),
height: 50,
color: Colors.cyan,
child: Column(children: [
Text(
'Capacity',
style: TextStyle(fontSize: 20),
)
]),
),
TableCell(
verticalAlignment: TableCellVerticalAlignment.fill,
child: Container(
padding: EdgeInsets.only(top: 1,left: 4 ),
color: Colors.white,
child: Column(children: [
TextField(
inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d{0,2}$'))],
controller: wholelayerController1,
focusNode: _wholelayerfocusNode1,
decoration:
InputDecoration(border: InputBorder.none),
style: TextStyle(fontSize: 18,),
),
]),
),
),
Container(
padding: EdgeInsets.only(top: 1,left: 6 ),
color: Colors.white,
child: Column(children: [
TextField(
inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d{0,2}$'))],
controller: wholelayerController2,
focusNode: _wholelayerfocusNode2,
decoration:
InputDecoration(border: InputBorder.none),
style: TextStyle(fontSize: 18,),
),
]),
),
Container(
padding: EdgeInsets.only(top: 1,left: 4 ),
color: Colors.white,
child: Column(children: [
TextField(
inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d{0,2}$'))],
controller: wholelayerController3,
focusNode: _wholelayerfocusNode3,
decoration:
InputDecoration(border: InputBorder.none),
style: TextStyle(fontSize: 18,),
),
]),
),

],
),
],
),
),

现有效果

现有表格效果

期望效果

目标表格效果

解决方案

Flutter的Table组件本身不直接支持单元格跨行，但可以通过添加两个独立的TableRow来实现需求：第一行对应“超时时间”，第二行对应“停止时间”，每行的第一列设置为青色背景，右侧列放置对应的输入框。

修改后的代码示例：

Container(
  margin: EdgeInsets.only(top: 10, right: 310),
  child: Table(
    columnWidths: {
      0: FlexColumnWidth(24),
      1: FlexColumnWidth(12),
      2: FlexColumnWidth(12),
    },
    border: TableBorder.all(color: Colors.black, style: BorderStyle.solid, width: 2),
    children: [
      // Layer No 行
      TableRow(
        children: [
          Container(
            padding: EdgeInsets.only(top: 14, left: 4),
            height: 50,
            color: Colors.cyan,
            child: Text('Layer No', style: TextStyle(fontSize: 20)),
          ),
          Container(
            height: 50,
            color: Colors.white,
            child: Center(child: Text('1', style: TextStyle(fontSize: 20))),
          ),
          Container(
            height: 50,
            color: Colors.white,
            child: Center(child: Text('2', style: TextStyle(fontSize: 20))),
          ),
          Container(
            height: 50,
            color: Colors.white,
            child: Center(child: Text('3', style: TextStyle(fontSize: 20))),
          ),
        ],
      ),
      // Capacity 行
      TableRow(
        children: [
          Container(
            padding: EdgeInsets.only(top: 15),
            height: 50,
            color: Colors.cyan,
            child: Text('Capacity', style: TextStyle(fontSize: 20)),
          ),
          Container(
            padding: EdgeInsets.only(top: 1, left: 4),
            color: Colors.white,
            child: TextField(
              inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d{0,2}$'))],
              controller: wholelayerController1,
              focusNode: _wholelayerfocusNode1,
              decoration: InputDecoration(border: InputBorder.none),
              style: TextStyle(fontSize: 18),
            ),
          ),
          Container(
            padding: EdgeInsets.only(top: 1, left: 6),
            color: Colors.white,
            child: TextField(
              inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d{0,2}$'))],
              controller: wholelayerController2,
              focusNode: _wholelayerfocusNode2,
              decoration: InputDecoration(border: InputBorder.none),
              style: TextStyle(fontSize: 18),
            ),
          ),
          Container(
            padding: EdgeInsets.only(top: 1, left: 4),
            color: Colors.white,
            child: TextField(
              inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d{0,2}$'))],
              controller: wholelayerController3,
              focusNode: _wholelayerfocusNode3,
              decoration: InputDecoration(border: InputBorder.none),
              style: TextStyle(fontSize: 18),
            ),
          ),
        ],
      ),
      // 超时时间 行
      TableRow(
        children: [
          Container(
            padding: EdgeInsets.only(top: 15),
            height: 50,
            color: Colors.cyan,
            child: Text('超时时间', style: TextStyle(fontSize: 20)),
          ),
          Container(
            padding: EdgeInsets.only(top: 1, left: 4),
            color: Colors.white,
            child: TextField(
              inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d{0,2}$'))],
              // 新增超时时间对应的controller和focusNode
              controller: timeoutController1,
              focusNode: _timeoutfocusNode1,
              decoration: InputDecoration(border: InputBorder.none),
              style: TextStyle(fontSize: 18),
            ),
          ),
          Container(
            padding: EdgeInsets.only(top: 1, left: 6),
            color: Colors.white,
            child: TextField(
              inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d{0,2}$'))],
              controller: timeoutController2,
              focusNode: _timeoutfocusNode2,
              decoration: InputDecoration(border: InputBorder.none),
              style: TextStyle(fontSize: 18),
            ),
          ),
          Container(
            padding: EdgeInsets.only(top: 1, left: 4),
            color: Colors.white,
            child: TextField(
              inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d{0,2}$'))],
              controller: timeoutController3,
              focusNode: _timeoutfocusNode3,
              decoration: InputDecoration(border: InputBorder.none),
              style: TextStyle(fontSize: 18),
            ),
          ),
        ],
      ),
      // 停止时间 行
      TableRow(
        children: [
          Container(
            padding: EdgeInsets.only(top: 15),
            height: 50,
            color: Colors.cyan,
            child: Text('停止时间', style: TextStyle(fontSize: 20)),
          ),
          Container(
            padding: EdgeInsets.only(top: 1, left: 4),
            color: Colors.white,
            child: TextField(
              inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d{0,2}$'))],
              // 新增停止时间对应的controller和focusNode
              controller: stopController1,
              focusNode: _stopfocusNode1,
              decoration: InputDecoration(border: InputBorder.none),
              style: TextStyle(fontSize: 18),
            ),
          ),
          Container(
            padding: EdgeInsets.only(top: 1, left: 6),
            color: Colors.white,
            child: TextField(
              inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d{0,2}$'))],
              controller: stopController2,
              focusNode: _stopfocusNode2,
              decoration: InputDecoration(border: InputBorder.none),
              style: TextStyle(fontSize: 18),
            ),
          ),
          Container(
            padding: EdgeInsets.only(top: 1, left: 4),
            color: Colors.white,
            child: TextField(
              inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d{0,2}$'))],
              controller: stopController3,
              focusNode: _stopfocusNode3,
              decoration: InputDecoration(border: InputBorder.none),
              style: TextStyle(fontSize: 18),
            ),
          ),
        ],
      ),
    ],
  ),
)

说明

  1. 在原Table的children列表中新增两个TableRow，分别对应“超时时间”和“停止时间”行；
  2. 为每行的第一列设置青色背景，与之前的表头风格保持一致；
  3. 右侧三列分别添加对应的输入框，需要提前定义好超时时间和停止时间对应的TextEditingController和FocusNode；
  4. 代码中简化了原有的嵌套Container结构，直接使用Center或直接放置文本/输入框，保持布局简洁。

内容的提问来源于stack exchange，提问作者newcomer

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.08.06 01:31:13