您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

编写第一个flutter应用(table)组件化 - cospan

发布时间：2026-07-05 18:46:05编辑：雪饮阅读（）

上篇中虽然实现了table的组件化，但当你进一步研究table的时候会发现其不支持html中的cospan的属性，也就是跨列。
那么这次新增一个跨列table的实现，跨列table实现就不能局限于table了，这里以Container的方式来实现
再次建立一个col_span_table.dart：
import 'package:flutter/material.dart';
 
class ColSpanTable extends StatefulWidget {
  const ColSpanTable({super.key});
  @override
  State<ColSpanTable> createState() => _ColSpanTableState();
}
 
class _ColSpanTableState extends State<ColSpanTable> {
  String _selectedGender = '男';
 
  Widget _buildHeaderCell(String text) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text(text, style: const TextStyle(fontWeight: FontWeight.bold)),
    );
  }
 
  Widget _buildInputCell(String hint) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextField(
        decoration: InputDecoration(
          hintText: hint,
          border: const OutlineInputBorder(),
        ),
      ),
    );
  }
 
  Widget _buildNumberInputCell() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextField(
        keyboardType: TextInputType.number,
        decoration: const InputDecoration(
          hintText: '请输入年龄',
          border: OutlineInputBorder(),
        ),
      ),
    );
  }
 
  Widget _buildDropdownCell() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: DropdownButton<String>(
        value: _selectedGender,
        onChanged: (String? newValue) {
          setState(() {
            _selectedGender = newValue!;
          });
        },
        items: <String>['男', '女'].map<DropdownMenuItem<String>>((String value) {
          return DropdownMenuItem<String>(value: value, child: Text(value));
        }).toList(),
      ),
    );
  }
 
  Widget _buildCell(String text) {
    return Padding(padding: const EdgeInsets.all(8.0), child: Text(text));
  }
 
  Widget _buildGridCell({
    required Widget child,
    bool rightBorder = false,
    bool bottomBorder = false,
  }) {
    return Container(
      decoration: BoxDecoration(
        border: Border(
          right: rightBorder ? const BorderSide() : BorderSide.none,
          bottom: bottomBorder ? const BorderSide() : BorderSide.none,
        ),
      ),
      child: child,
    );
  }
 
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(border: Border.all()),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            children: [
              Expanded(
                child: _buildGridCell(
                  child: _buildHeaderCell('姓名'),
                  rightBorder: true,
                  bottomBorder: true,
                ),
              ),
              Expanded(
                child: _buildGridCell(
                  child: _buildHeaderCell('年龄'),
                  rightBorder: true,
                  bottomBorder: true,
                ),
              ),
              Expanded(
                child: _buildGridCell(
                  child: _buildHeaderCell('性别'),
                  bottomBorder: true,
                ),
              ),
            ],
          ),
          Row(
            children: [
              Expanded(
                child: _buildGridCell(
                  child: _buildInputCell('请输入姓名'),
                  rightBorder: true,
                  bottomBorder: true,
                ),
              ),
              Expanded(
                child: _buildGridCell(
                  child: _buildNumberInputCell(),
                  rightBorder: true,
                  bottomBorder: true,
                ),
              ),
              Expanded(
                child: _buildGridCell(
                  child: _buildDropdownCell(),
                  bottomBorder: true,
                ),
              ),
            ],
          ),
          Row(
            children: [
              Expanded(
                flex: 3,
                child: _buildGridCell(child: _buildCell('这是一个跨列单元格')),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
 
然后昨天的main.dart则再次引入这个新的组件
import 'col_span_table.dart';
并挂载这个新的组件
children: [
            const Text('You have pushed the button this many times:'),
            const InfoTable(),
            const ColSpanTable(),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
运行可能会报错如：
在控制台我看到的错误却是： https://www.gstatic.com/flutter-canvaskit/a10d8ac38de835021c8d2f920dbf50a920ccc030/chromium/canvaskit.wasm net::ERR_CONNECTION_RESET
 
这种原因是我昨晚开了代理，因为这里canvas渲染是默认的web的渲染模式，而且并非从本地的代码直接渲染，这里使用了远端的canvas套件进行渲染的，也就是类似cdn那种的。
代理关闭后重新尝试即可。
 
 
那么接下来再美化下跨列表格
col_span_table.dart：
  child: _buildGridCell(
                  child: Center(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(vertical: 10),
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          minimumSize: Size.zero,
                          padding: const EdgeInsets.symmetric(
                            horizontal: 16,
                            vertical: 16,
                          ),
                          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                        ),
                        onPressed: () {},
                        child: const Text('这是一个跨列单元格'),
                      ),
                    ),
                  ),
                ),
 
main.dart:
children: [
            const Text('You have pushed the button this many times:'),
            const Text('普通table'),
            const Divider(),
            const InfoTable(),
            const Text('跨列table'),
            const Divider(),
            const ColSpanTable(),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
最后的效果