如何在Flutter中通过API实现如图所示的数据表格展示？

先看你提供的效果示意图：

下面提供几种适配常见这类需求的实现思路和代码示例，你可以根据图中实际样式调整细节：

1. 单组数据卡片布局 #

如果是单条数据的卡片式展示，用Card配合Row/Column就能快速实现：

Card(
  elevation: 2,
  margin: EdgeInsets.all(16),
  child: Padding(
    padding: EdgeInsets.symmetric(horizontal: 16, vertical: 20),
    child: Row(
      children: [
        // 左侧标识区
        Container(
          width: 60,
          height: 60,
          decoration: BoxDecoration(
            color: Colors.blue.shade100,
            borderRadius: BorderRadius.circular(12),
          ),
          child: Icon(Icons.data_usage, color: Colors.blue),
        ),
        SizedBox(width: 16),
        // 右侧数据内容区
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text("数据标题", style: TextStyle(fontSize: 14, color: Colors.grey)),
              SizedBox(height: 8),
              Text("1234", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
              SizedBox(height: 4),
              Text("较昨日 +12%", style: TextStyle(fontSize: 12, color: Colors.green)),
            ],
          ),
        ),
      ],
    ),
  ),
)

2. 多组数据网格布局 #

如果是多组数据横向/纵向排列，用GridView或Wrap组件批量渲染卡片：

GridView.count(
  padding: EdgeInsets.all(16),
  crossAxisCount: 2,
  crossAxisSpacing: 16,
  mainAxisSpacing: 16,
  children: [
    _buildDataCard(Icons.people, "用户总数", "5678", "+8%"),
    _buildDataCard(Icons.shopping_cart, "订单数量", "1234", "-2%"),
    _buildDataCard(Icons.monetization_on, "总收入", "¥9876", "+15%"),
    _buildDataCard(Icons.comment, "评论数", "4321", "+5%"),
  ],
)

// 封装可复用的卡片组件
Widget _buildDataCard(IconData icon, String title, String value, String change) {
  return Card(
    elevation: 2,
    child: Padding(
      padding: EdgeInsets.all(16),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 50,
            height: 50,
            decoration: BoxDecoration(
              color: Colors.orange.shade100,
              borderRadius: BorderRadius.circular(8),
            ),
            child: Icon(icon, color: Colors.orange),
          ),
          SizedBox(height: 12),
          Text(title, style: TextStyle(fontSize: 14, color: Colors.grey)),
          SizedBox(height: 8),
          Text(value, style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
          SizedBox(height: 4),
          Text(change, style: TextStyle(fontSize: 12, color: change.contains("+") ? Colors.green : Colors.red)),
        ],
      ),
    ),
  );
}

3. 带进度/状态的展示 #

如果图中有进度条或特殊状态标识，可结合LinearProgressIndicator实现：

Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text("完成进度", style: TextStyle(fontSize: 16)),
        SizedBox(height: 8),
        LinearProgressIndicator(
          value: 0.75, // 进度值范围0-1
          backgroundColor: Colors.grey.shade200,
          valueColor: AlwaysStoppedAnimation<Color>(Colors.green),
        ),
        SizedBox(height: 8),
        Text("75% 已完成", style: TextStyle(fontSize: 14, color: Colors.grey)),
      ],
    ),
  ),
)

你可以根据图中的具体样式（比如配色、圆角、阴影、是否包含图表等）调整代码细节，比如修改颜色值、字体大小、组件间距等。

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