Flutter点击悬浮按钮获取DataTable选中数据并跨页面传递的实现咨询

一、修复现有代码初始化bug #

当前代码的avail选中状态数组和qty输入控制器数组初始化逻辑存在空安全隐患，运行时会直接触发报错，需调整声明和初始化时机：

1. 替换原有的数组声明代码：

// 去掉原来的late提前初始化逻辑
List<bool> avail = [];
List<TextEditingController> qty = [];

2. 在StreamBuilder拿到数据的分支中补充初始化逻辑，放在len = data!.length;之后即可：

// 仅在数组未初始化或数据长度变化时重新初始化，避免页面刷新丢失已输入的数量和选中状态
if(avail.length != len) {
  avail = List.generate(len!, (index) => false);
  qty = List.generate(len!, (index) => TextEditingController());
}

二、封装选中商品数据模型 #

为了方便参数传递和后续使用，新增选中商品数据类：

class SelectedProduct {
  final String name;
  final double price;
  final int quantity;

  SelectedProduct({
    required this.name,
    required this.price,
    required this.quantity,
  });
}

三、实现悬浮按钮点击逻辑 #

替换悬浮按钮的onPressed方法代码：

onPressed: () {
  List<SelectedProduct> selectedList = [];
  for (int i = 0; i < avail.length; i++) {
    if (avail[i]) {
      // 校验数量输入合法性
      String inputQty = qty[i].text.trim();
      if (inputQty.isEmpty || int.tryParse(inputQty) == null || int.parse(inputQty) <= 0) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text("请为选中的${data![i].Juice_Name}输入正确的购买数量"))
        );
        return;
      }
      selectedList.add(SelectedProduct(
        name: data![i].Juice_Name,
        price: double.parse(data![i].Price),
        quantity: int.parse(inputQty),
      ));
    }
  }
  // 校验是否有选中商品
  if (selectedList.isEmpty) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text("请先勾选要购买的商品"))
    );
    return;
  }
  // 跳转到目标展示页面，传入选中数据，示例目标页面为BillPage
  Navigator.push(context, MaterialPageRoute(builder: (context) => BillPage(
    selectedProducts: selectedList,
  )));
},

四、目标页面接收参数示例 #

展示选中数据的目标页面构造参考：

class BillPage extends StatelessWidget {
  final List<SelectedProduct> selectedProducts;
  const BillPage({Key? key, required this.selectedProducts}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("订单确认")),
      body: ListView.builder(
        itemCount: selectedProducts.length,
        itemBuilder: (context, index) {
          final item = selectedProducts[index];
          return ListTile(
            title: Text(item.name),
            subtitle: Text("单价：¥${item.price} 数量：${item.quantity}"),
            trailing: Text("小计：¥${item.price * item.quantity}"),
          );
        },
      ),
    );
  }
}

注意事项 #

• 如果Price字段存储的内容带货币符号（比如¥10），需要先把符号去掉再转double，避免解析报错
• 数量输入组件IncDecButton需保证输出为合法数字，避免出现解析异常

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