Flutter实现REST接口数据在水平ListView中的动态展示

核心步骤： #

• 将当前页面改为StatefulWidget（需异步加载数据并更新UI）
• 在状态类中维护数据列表与加载状态
• 初始化阶段调用接口获取数据，更新页面状态
• 替换硬编码的ListView为动态遍历数据的结构

具体代码实现： #

1. 状态类变量定义
   在页面的State类中添加以下变量：

List<AccountDetails> _accountList = [];
bool _isLoading = true;
String? _errorMsg;

2. 异步加载接口数据
   在initState中调用接口，并处理返回结果：

@override
void initState() {
  super.initState();
  _loadAccountData();
}

Future<void> _loadAccountData() async {
  try {
    final data = await fetchAccountDetails();
    setState(() {
      // 若fetchAccountDetails返回单个对象，改为_accountList = [data]
      _accountList = data;
      _isLoading = false;
    });
  } catch (e) {
    setState(() {
      _errorMsg = '加载失败：${e.toString()}';
      _isLoading = false;
    });
  }
}

3. 构建动态水平滑动列表
   替换原硬编码的ListView部分，改为动态生成列表项：

@override
Widget build(BuildContext context) {
  return Scaffold(
    // 保留原有页面其他结构
    body: _isLoading
        ? const Center(child: CircularProgressIndicator())
        : _errorMsg != null
            ? Center(child: Text(_errorMsg!))
            : SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: _accountList.map((account) {
                    return Container(
                      width: 160,
                      margin: const EdgeInsets.symmetric(horizontal: 10),
                      padding: const EdgeInsets.all(14),
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.grey.shade300),
                        borderRadius: BorderRadius.circular(10),
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('币种：${account.coin_name}'),
                          const SizedBox(height: 6),
                          Text('地址：${account.address}', maxLines: 2, overflow: TextOverflow.ellipsis),
                          const SizedBox(height: 6),
                          Text('余额：${account.balance}'),
                        ],
                      ),
                    );
                  }).toList(),
                ),
              ),
  );
}

也可以用ListView.builder(scrollDirection: Axis.horizontal, itemCount: _accountList.length, itemBuilder: ...)实现，两种方式按需选择即可。

关键注意事项： #

• 确认AccountDetails的fromJson方法与接口返回的字段（address、balance、coin_name）完全匹配，避免解析失败
• 必须处理网络异常、JSON解析异常，防止APP崩溃
• 列表项的样式可根据需求自定义，替换上述Container内的布局即可

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