如何将flutter_sticky_header与flutter_staggered_grid_view结合?

时间:2019-02-13 16:41:27

标签: flutter sticky flutter-layout staggered-gridview flutter-sliver

我试图将flutter_staggered_grid_view与flutter_sticky_header结合使用,因为我想要一个粘性标头,该标头具有针对每个孩子的动态长宽比(不适用于所有孩子,而不是实际代码和屏幕截图中的https://i.stack.imgur.com/lZgp0.png)。 我只希望将文本扩展到适合卡片或容器的大小(crossAxisCount:1对我来说很好),但是将这两个项目结合起来也很棒:)

@Romain Rastel太好了!如果您觉得这个有趣,请帮助:)

List<Widget> _buildSideHeaderGrids(
  BuildContext context, int firstIndex, int count) {
double cardWidth = MediaQuery.of(context).size.width / 3.3;
double cardHeight = MediaQuery.of(context).size.height / 3.6;

List<double> topet = [2,3,4];
return List.generate(count, (sliverIndex) {
  print(sliverIndex);
  sliverIndex += firstIndex;
  return new SliverStickyHeader(
    overlapsContent: true,
    header: _buildSideHeader(context, sliverIndex),
    sliver: new SliverPadding(
      padding: new EdgeInsets.only(left: 60.0),
      sliver: new SliverGrid(
        gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 1,
            crossAxisSpacing: 4.0,
            mainAxisSpacing: 4.0,
            childAspectRatio: topet[sliverIndex],
        ),
        delegate: new SliverChildBuilderDelegate(
          (context, i) => GestureDetector(
                  child: new GridTile(
                  child: Card(
                    child: new Container(
                      color: Colors.orange,
                      child: Text(""),
                    ),
                  ),
                  footer: new Container(
                    color: Colors.white.withOpacity(0.5),
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: new Text(
                        'Grid tile #$i',
                        style: const TextStyle(color: Colors.black),
                      ),
                    ),
                  ),
                ),
              ),
          childCount: 3, // grid tile brenda
        ),
      ),
    ),
  );
});
}

0 个答案:

没有答案