Flutter实现点击FAB添加Table组件功能

要实现点击FAB新增Table的功能，核心是利用Flutter的状态管理动态维护UI列表，具体实现步骤如下：

1. 将当前组件改为StatefulWidget，用于维护可变的Table列表状态
2. 声明列表存储生成的Table组件
3. 在FAB的onPressed中通过setState向列表添加新Table，触发UI更新

修改后的完整代码 #

import 'package:flutter/material.dart';

class TablePage extends StatefulWidget {
  const TablePage({super.key});

  @override
  State<TablePage> createState() => _TablePageState();
}

class _TablePageState extends State<TablePage> {
  // 存储所有Table组件的列表，初始包含一个默认Table
  final List<Widget> _tables = [];

  @override
  void initState() {
    super.initState();
    // 初始化时添加第一个Table
    _tables.add(_buildBasicTable());
  }

  // 封装生成基础Table的方法，避免重复代码
  Widget _buildBasicTable() {
    return Container(
      margin: const EdgeInsets.all(20),
      child: Table(
        border: const TableBorder(
          top: BorderSide(),
          bottom: BorderSide(),
          left: BorderSide(),
          right: BorderSide(),
          horizontalInside: BorderSide(color: Colors.blue, style: BorderStyle.solid),
          verticalInside: BorderSide(color: Colors.blue, style: BorderStyle.solid),
        ),
        children: const [
          TableRow(children: [
            Padding(padding: EdgeInsets.all(10.0)),
            Padding(padding: EdgeInsets.all(10.0))
          ]),
          TableRow(children: [
            Padding(padding: EdgeInsets.all(10.0)),
            Padding(padding: EdgeInsets.all(10.0))
          ]),
          TableRow(children: [
            Padding(padding: EdgeInsets.all(10.0)),
            Padding(padding: EdgeInsets.all(10.0))
          ]),
          TableRow(children: [
            Padding(padding: EdgeInsets.all(10.0)),
            Padding(padding: EdgeInsets.all(10.0))
          ]),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const AppBar(
        title: Text("Table"),
      ),
      floatingActionButton: FloatingActionButton(
        highlightElevation: 50,
        onPressed: () {
          // 点击时添加新Table并更新状态
          setState(() {
            _tables.add(_buildBasicTable());
          });
        },
        child: const Icon(Icons.add),
      ),
      body: Center(
        child: SingleChildScrollView( // 添加滚动组件，避免Table过多溢出屏幕
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: _tables, // 直接渲染Table列表
          ),
        ),
      ),
    );
  }
}

关键说明 #

• 状态管理：通过StatefulWidget和setState实现UI动态更新，每次调用setState都会触发build方法重新渲染列表
• 代码复用：用_buildBasicTable方法封装Table生成逻辑，避免重复编写相同代码
• 滚动处理：添加SingleChildScrollView包裹Column，防止新增多个Table后超出屏幕范围导致布局错误

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