Flutter新手求助：如何复刻目标UI界面？

你遇到的问题是普通GridView无法实现不规则网格布局（比如不同item占据不同行列数），可以使用flutter_staggered_grid_view第三方包来实现，以下是具体实现步骤和代码示例：

1. 添加依赖 #

在pubspec.yaml中添加依赖：

dependencies:
  flutter_staggered_grid_view: ^0.7.0

执行flutter pub get完成依赖安装。

2. 实现布局 #

使用StaggeredGridView.builder构建不规则网格，示例代码如下：

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

class TargetUIReproduction extends StatelessWidget {
  // 模拟数据，对应每个item的行列配置与样式
  final List<Map<String, dynamic>> items = [
    {'cross': 2, 'main': 1, 'color': Colors.red.shade300},
    {'cross': 1, 'main': 2, 'color': Colors.blue.shade300},
    {'cross': 1, 'main': 1, 'color': Colors.green.shade300},
    {'cross': 2, 'main': 1, 'color': Colors.yellow.shade300},
    {'cross': 1, 'main': 1, 'color': Colors.orange.shade300},
    {'cross': 1, 'main': 2, 'color': Colors.purple.shade300},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('复刻目标UI')),
      body: StaggeredGridView.builder(
        padding: const EdgeInsets.all(8),
        crossAxisCount: 2, // 网格总列数，可根据原UI调整
        itemCount: items.length,
        itemBuilder: (context, index) {
          return Container(
            color: items[index]['color'],
            alignment: Alignment.center,
            child: Text('Item ${index+1}', style: const TextStyle(fontSize: 18)),
          );
        },
        // 指定每个item占据的列数、行数比例
        staggeredTileBuilder: (index) => StaggeredTile.count(
          items[index]['cross'],
          items[index]['main'],
        ),
        mainAxisSpacing: 8,
        crossAxisSpacing: 8,
      ),
    );
  }
}

关键说明 #

• crossAxisCount设置网格总列数，需匹配原UI的列数规则。
• StaggeredTile.count用来定义每个item占据的列数和行数比例，你可以对照原UI中每个元素的大小，调整这两个参数来完全匹配布局。
• 如果原UI是瀑布流（item高度不固定），可以用StaggeredTile.fit(1)结合动态计算item高度的方式实现。

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