Flutter中带参数API数据获取函数的Widget调用方法咨询

方法一：用FutureBuilder直接在Widget树中调用（推荐） #

FutureBuilder专门用来处理异步操作并联动UI渲染，刚好适配你需要调用API并展示数据的场景。

示例代码：

class KuliahDataWidget extends StatelessWidget {
  // 从外部传入学期参数
  final String semester;

  const KuliahDataWidget({super.key, required this.semester});

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<Map<String, DataKuliahModel>>(
      // 调用带参数的API函数，传入semester
      future: YourApiClass.getDataKuliah(semester),
      builder: (context, snapshot) {
        // 处理不同异步状态
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          return Center(child: Text('加载失败: ${snapshot.error}'));
        } else if (snapshot.hasData) {
          // 数据加载完成，构建列表展示
          final kuliahDataMap = snapshot.data!;
          return ListView.builder(
            itemCount: kuliahDataMap.length,
            itemBuilder: (context, index) {
              final key = kuliahDataMap.keys.elementAt(index);
              final data = kuliahDataMap[key];
              return ListTile(
                title: Text(data?.namaMatkul ?? '无课程名'),
                subtitle: Text('课程编号: $key'),
              );
            },
          );
        } else {
          return const Center(child: Text('暂无数据'));
        }
      },
    );
  }
}

使用这个Widget时，直接传入学期参数即可：

// 比如传入2024学年第一学期
KuliahDataWidget(semester: "20241")

方法二：在StatefulWidget初始化时调用 #

如果需要在Widget启动时就触发API请求，再更新状态渲染UI，可以用StatefulWidget实现：

class KuliahDataWidget extends StatefulWidget {
  final String semester;

  const KuliahDataWidget({super.key, required this.semester});

  @override
  State<KuliahDataWidget> createState() => _KuliahDataWidgetState();
}

class _KuliahDataWidgetState extends State<KuliahDataWidget> {
  Map<String, DataKuliahModel>? _kuliahData;
  bool _isLoading = true;
  String? _errorMsg;

  @override
  void initState() {
    super.initState();
    // 初始化时调用API
    _loadKuliahData();
  }

  Future<void> _loadKuliahData() async {
    try {
      final data = await YourApiClass.getDataKuliah(widget.semester);
      setState(() {
        _kuliahData = data;
        _isLoading = false;
      });
    } catch (e) {
      setState(() {
        _errorMsg = e.toString();
        _isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    if (_isLoading) {
      return const Center(child: CircularProgressIndicator());
    }
    if (_errorMsg != null) {
      return Center(child: Text('加载失败: $_errorMsg'));
    }
    if (_kuliahData == null || _kuliahData!.isEmpty) {
      return const Center(child: Text('暂无课程数据'));
    }

    // 渲染数据列表
    return ListView.builder(
      itemCount: _kuliahData!.length,
      itemBuilder: (context, index) {
        final key = _kuliahData!.keys.elementAt(index);
        final data = _kuliahData![key];
        return ListTile(
          title: Text(data?.namaMatkul ?? '无课程名'),
          subtitle: Text('课程编号: $key'),
        );
      },
    );
  }
}

注意事项 #

• 把代码中的YourApiClass替换成你定义getDataKuliah函数的实际类名
• 根据DataKuliahModel的实际字段调整UI展示内容（比如示例中的namaMatkul）
• 学期参数可以从用户输入、SharedPreferences或父Widget传递，灵活调整即可

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