使用多个 SliverStaggeredGrid 时颤动 CustomScrollView 滚动错误答案

【问题标题】：flutter CustomScrollView scroll bug when using multiple SliverStaggeredGrid使用多个 SliverStaggeredGrid 时颤动 CustomScrollView 滚动错误
【发布时间】：2020-01-09 07:29:56
【问题描述】：

使用多个交错网格视图时无法滚动

在下面的链接中分享我的代码和屏幕

https://github.com/letsar/flutter_staggered_grid_view/issues/98

请帮帮我

【问题讨论】：

标签： flutter staggered-gridview

【解决方案1】：

我今天遇到了同样的问题。我有一个丑陋的解决方案。像这样敲打它来添加交错网格视图。

SliverToBoxAdapter(
      child: SizedBox(
        height: (products.length/2 + products.length%2) * 245,
        child: CustomScrollView(
          physics: NeverScrollableScrollPhysics(),
          slivers: [
            SliverStaggeredGrid.countBuilder()])))

CustomScrollview 可以接受 SliverToBoxAdapter

【讨论】：

【解决方案2】：

我的网格使用crossAxisCount: 3,， itemLength/3 可以给出分数。使用~/。

输出

主小部件

import 'package:flutter/material.dart';
import 'package:staggered_grid_view_flutter/widgets/sliver.dart';
import 'package:staggered_grid_view_flutter/widgets/staggered_tile.dart';

class StraggerMUl extends StatelessWidget {
  const StraggerMUl({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    int itemsLength = 7;

    return Scaffold(
      body: LayoutBuilder(builder: (context, constraints) {
        return CustomScrollView(
          slivers: [
            GirdBOx(
              constraints: constraints,
              itemsLength: itemsLength,
            ),
            GirdBOx(
              constraints: constraints,
              itemsLength: itemsLength,
            ),
            GirdBOx(
              constraints: constraints,
              itemsLength: itemsLength,
            ),
          ],
        );
      }),
    );
  }
}

银盒


class GirdBOx extends StatelessWidget {
  final BoxConstraints constraints;
  final int itemsLength;
  const GirdBOx({
    Key? key,
    required this.itemsLength,
    required this.constraints,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SliverToBoxAdapter(
      child: SizedBox(
        height: (itemsLength ~/ 3) * (constraints.maxWidth * (1 / 3.0)) +
            (itemsLength % 3) * (constraints.maxWidth * (1 / 3.0)),
        child: Container(
          color: Colors.amber,
          child: CustomScrollView(
            physics: NeverScrollableScrollPhysics(),
            slivers: [
              SliverStaggeredGrid.countBuilder(
                crossAxisCount: 3,
                itemCount: itemsLength,
                itemBuilder: (BuildContext context, int index) => Container(
                    color: Colors.green,
                    child: Center(
                      child: CircleAvatar(
                        backgroundColor: Colors.white,
                        child: Text('$index'),
                      ),
                    )),
                staggeredTileBuilder: (int index) {
                  // if (_largeTiles.contains(index))
                  //   return StaggeredTile.count(2, 2);
                  // else
                  return StaggeredTile.count(1, 1);
                },
                mainAxisSpacing: 1.0,
                crossAxisSpacing: 1.0,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

【讨论】：