#flutter #image flutter_staggered_grid_view 初始加载，图片的宽高固定

flutter_staggered_grid_view_image_fixed.dart

class _HomeTabState extends State<HomeTab> {

  List<ImageList> _imgList = List<ImageList>();

  ScrollController _scrollController = ScrollController();
  bool isPerformingRequest = false;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
        loadImageList();
      }
    });
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // double width = MediaQuery.of(context).size.width;
    // print('width is ${width}');
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text('home'),
      ),
      
      body: FutureBuilder<ImageList>(
        future: loadImageList(),
        builder: (context, snapshot) {
          if(snapshot.connectionState == ConnectionState.done) {

                if(snapshot.hasError || snapshot.data.code != 1){
                  return Text("Error");
                }
                var _imgList = snapshot.data.list;

                List<StaggeredTile> _tiles = List<StaggeredTile>();


                for (var img in _imgList) {
                  _tiles.add(
                    // StaggeredTile.count(2, 2*img.imageHeight/img.imageWidth)
                    StaggeredTile.fit(2)
                  );
                }

                return StaggeredGridView.countBuilder(
                  crossAxisCount: 4,
                  itemCount: _imgList.length,
                  itemBuilder: (BuildContext context, int index) => _Tile(index, _imgList[index]),
                  staggeredTileBuilder: (int index) => _tiles[index], // StaggeredTile.fit(2), // 实例化 StaggeredTile 并将 横轴的单元设置为
                  mainAxisSpacing: 4.0,
                  crossAxisSpacing: 4.0,
                );
              }
              else
                return CircularProgressIndicator();
        }
      )
    );
  }
}

class _Tile extends StatelessWidget {
  const _Tile(this.index, this.img);

  final BarImage img;
  final int index;

  @override
  Widget build(BuildContext context) {
    return Card(
        child: Column(
          children: <Widget>[
            Stack(
              children: <Widget>[
                //Center(child: CircularProgressIndicator()),
                LayoutBuilder(
                  builder: (BuildContext context, BoxConstraints constraints) {
                    double maxWidth = constraints.maxWidth;
                    double imgWidth = img.imageWidth.toDouble();
                    double imgHeight = img.imageHeight.toDouble();

                    return Center(
                      child: FadeInImage.memoryNetwork(
                        width: maxWidth,
                        height: maxWidth*imgHeight/imgWidth,
                        placeholder: kTransparentImage,
                        image: img.imageUrl,
                      ),
                    );
                  }
                ),
              ],
            ),
            Padding(
              padding: const EdgeInsets.all(4.0),
              child: Column(
                children: <Widget>[
                  Text(
                    'Image number $index',
                    style: const TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Text(
                    'Width: ${img.imageWidth}',
                    style: const TextStyle(color: Colors.grey),
                  ),
                  Text(
                    'Height: ${img.imageHeight}',
                    style: const TextStyle(color: Colors.grey),
                  ),
                ],
              ),
            )
          ],
        ),
      );
  }
}