请求实现垂直与水平滚动视图，仅动态生成绿色框行

核心思路 #

在垂直ListView的条目构建逻辑里，判断当前行是否为绿色框对应的目标行：

• 若是目标行，返回包含水平ListView的容器组件
• 若非目标行，保持原有行布局不变

代码示例（以Flutter为例） #

首先定义垂直列表的数据源，标记出需要生成水平列表的行：

final List<Map<String, dynamic>> verticalListData = [
  {"isTarget": false, "title": "普通行1"},
  {"isTarget": true, "title": "绿色框行", "horizontalItems": ["商品A", "商品B", "商品C", "商品D"]},
  {"isTarget": false, "title": "普通行2"},
  // 可扩展更多行数据
];

接着实现嵌套列表的布局：

ListView.builder(
  itemCount: verticalListData.length,
  itemBuilder: (context, index) {
    final currentItem = verticalListData[index];
    
    // 判断是否为绿色框目标行
    if (currentItem["isTarget"]) {
      return Container(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.green, width: 2),
          borderRadius: BorderRadius.circular(6),
        ),
        margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
        padding: const EdgeInsets.all(12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(currentItem["title"], style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w500)),
            const SizedBox(height: 10),
            // 水平滚动列表
            SizedBox(
              height: 130, // 固定高度避免垂直列表布局异常
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: currentItem["horizontalItems"].length,
                itemBuilder: (context, hIndex) {
                  // 动态生成水平列表项
                  return Container(
                    width: 140,
                    margin: const EdgeInsets.only(right: 10),
                    decoration: BoxDecoration(
                      color: Colors.grey[100],
                      borderRadius: BorderRadius.circular(6),
                    ),
                    child: Center(
                      child: Text(currentItem["horizontalItems"][hIndex]),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      );
    } else {
      // 普通行保持原有样式
      return ListTile(
        title: Text(currentItem["title"]),
        contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      );
    }
  },
)

关键注意点 #

• 水平ListView必须指定scrollDirection: Axis.horizontal，同时设置固定高度，否则会导致垂直ListView的布局计算错误
• 目标行的水平列表数据可以根据业务需求动态生成（比如从接口拉取、本地数据库读取）
• 可以通过数据源中的标识（如示例里的isTarget）灵活控制哪些行需要显示水平列表

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