Flutter自定义Accordion组件无数据显示问题求助

问题现象 #

自定义Accordion组件无法正常加载并显示数据，尝试过ListView传索引、硬编码两种方式，均出现内容空白的情况。相关截图如下：

相关代码 #

调用Accordion的代码 #

Accordion(
  title: receiptData.getVisitType(0),
  content: receiptData.getVisitDesc(),
),

main.dart中的调用代码 #

Accordion(
  title: receiptData.getVisitType(),
  content: receiptData.getVisitDesc(),
),

Accordion组件代码 #

import 'package:flutter/material.dart';
import 'receiptClassData.dart';

ReceiptData receiptData = ReceiptData();

class Accordion extends StatefulWidget {
  final String title;
  final String content;

  const Accordion({Key? key, required this.title, required this.content})
      : super(key: key);
  @override
  _AccordionState createState() => _AccordionState();
}

class _AccordionState extends State<Accordion> {
  bool _showContent = false;
  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.all(10),
      child: Column(children: [
        ListTile(
          title: Text(widget.title),
          onTap:(){
              setState(() {
                _showContent = !_showContent;
              });
            },
        ),
        _showContent
            ? Container(
          padding:
          const EdgeInsets.symmetric(vertical: 15, horizontal: 15),
          child: Text(widget.content),
        )
            : Container()
      ]),
    );
  }
}

receiptClassData.dart代码 #

import 'receiptClass.dart';

int _receiptIndex = 0;

class ReceiptData {
  final List<Receipt> _receiptdata = [
    Receipt("Physical Therapy", "Walking\nKnee jumps\nFeeding fish", "Needs to do more memory training\nto take medication 3 times per day", 23.00, 10.50, 4.0),
    Receipt("Consultation","Jogging\nGardening\nRest", "Needs more sleep and not to skip medication", 23.00, 15.50, 3.5),
    Receipt("Physical Therapy","Swimming\nWalking\nGardening", "Needs more energy so more exercise is advised", 33.00, 25.00, 5.0),
    Receipt("Consultation","nil", "Medication to be taken daily as recommended on bottle", 55.00, 45.50, 1),
    Receipt("Consultation","Walking\nGardening\nWalking Dog", "Mental health has been affected, advised to do more hobbies instead of staying at home", 33.00, 100.50, 4.5),
  ];

  String getVisitType(){
    return _receiptdata[_receiptIndex].title;
  }

  String getVisitDesc(){
    return _receiptdata[_receiptIndex].titleDesc;
  }

  String getDoctorNotes(){
    return _receiptdata[_receiptIndex].doctorNotes;
  }

  double getCFees(){
    return _receiptdata[_receiptIndex].consultationFee;
  }

  double getMFees(){
    return _receiptdata[_receiptIndex].medicationFee;
  }

  double calcTotal(){
    return _receiptdata[_receiptIndex].consultationFee + _receiptdata[_receiptIndex].medicationFee;
  }

  double getRating(){
    return _receiptdata[_receiptIndex].rating;
  }

  int getIndex(){
    return _receiptIndex;
  }
}

Receipt类代码 #

import 'dart:ui';

class Receipt {
  String title = "";
  String titleDesc = "";
  String doctorNotes = "";
  double consultationFee = 0.0;
  double medicationFee = 0.0;
  double rating = 0.0;

  Receipt(String rs, String rtd, String rdn, double rcf, double rmf, double rr){
    String title = rs;
    String titleDesc = rtd;
    String doctorNotes = rdn;
    double consultationFee = rcf;
    double medicationFee = rmf;
    double rating = rr;
  }
}

问题根源 #

核心问题出在Receipt类的构造函数中：你在构造函数里重新声明了与类成员同名的局部变量，导致类的成员变量始终保持初始的空字符串/0.0值，Accordion组件拿到的都是空内容，自然显示空白。

修复方案 #

1. 修复Receipt类构造函数 #

去掉构造函数中变量前的类型声明，直接给类成员赋值：

import 'dart:ui';

class Receipt {
  String title = "";
  String titleDesc = "";
  String doctorNotes = "";
  double consultationFee = 0.0;
  double medicationFee = 0.0;
  double rating = 0.0;

  Receipt(String rs, String rtd, String rdn, double rcf, double rmf, double rr){
    // 直接给类成员赋值，不再声明局部变量
    title = rs;
    titleDesc = rtd;
    doctorNotes = rdn;
    consultationFee = rcf;
    medicationFee = rmf;
    rating = rr;
  }
}

或者更简洁的使用Dart初始化列表写法（更符合规范）：

import 'dart:ui';

class Receipt {
  String title;
  String titleDesc;
  String doctorNotes;
  double consultationFee;
  double medicationFee;
  double rating;

  // 使用初始化列表直接赋值
  Receipt(
    String rs, 
    String rtd, 
    String rdn, 
    double rcf, 
    double rmf, 
    double rr
  ) : title = rs,
      titleDesc = rtd,
      doctorNotes = rdn,
      consultationFee = rcf,
      medicationFee = rmf,
      rating = rr;
}

2. 优化ReceiptData的方法（可选） #

你之前调用getVisitType(0)时，原方法不支持参数，可修改方法添加可选索引参数，方便获取指定位置的数据：

// 在ReceiptData类中修改方法
String getVisitType([int? index]){
  return _receiptdata[index ?? _receiptIndex].title;
}

String getVisitDesc([int? index]){
  return _receiptdata[index ?? _receiptIndex].titleDesc;
}

修改完成后，Accordion组件就能正常加载并显示数据了。

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