flutter - Flutter：如何在一定数量的索引后在gridview下添加其他小部件

Question

我正在使用flutter gridview项目，我想在一定数量的索引后显示另一个小部件。

如何在gridview的每6个索引之后添加小部件

GridView.builder(shrinkWrap: true,gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2,childAspectRatio: MediaQuery.of(context).size.width /
            (MediaQuery.of(context).size.width*0.9),),
            physics: NeverScrollableScrollPhysics(),


            itemCount: widget.dicovervehiclelist.length,
            itemBuilder: (BuildContext context, int index) {
              return vehicleview(
                  widget.dicovervehiclelist[index], context,widget.dicovervehiclelist.length,index);
            }),

标签： flutter

Answer 1

我们可以将业务逻辑放在 itemBuilder 中。

如果 index+1 可以被 6 整除，那么我们再放一个小部件。在这种情况下，我放置了 Text("This is Separator") 小部件。

  Widget renderSeparator(){
    return Text("This is Separator");
  }

  Widget renderGrids() {
    Widget grids = GridView.builder(
      shrinkWrap: true,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: MediaQuery.of(context).size.width /
            (MediaQuery.of(context).size.width * 0.9),
      ),
      // physics: NeverScrollableScrollPhysics(),
      // itemCount: widget.dicovervehiclelist.length,
      itemCount: 20,
      itemBuilder: (BuildContext context, int index) {
        // return vehicleview(
        //   widget.dicovervehiclelist[index], 
        //   context,widget.dicovervehiclelist.length,
        //   index);
        return Container(
          child: Column(
            children: <Widget>[
              Text("Main Content"),
              if ((index+1) % 6 == 0)
                renderSeparator()
            ],
          )
        );
      },
    );
    return grids;
  }

- Hitanshu更新的要求

谢谢...但它仅在==5等索引下方，我想显示在两个索引下方，例如4和5 ..其中crossAxisCount：1

如果我们要实现 Grid 和 List View 的组合，我们需要有

1. 自定义滚动视图
2. 银格
3. 银名单
4. SliverChildListDelegate

工作示例应用程序

您可以查看存储库。Github

这是完整的代码

import 'package:flutter/material.dart';

class GridViewListViewIndex extends StatelessWidget {

  final int newsFeedCount = 18;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Special after 6th'),
      ),
      body: Container(
        child: renderScrollArea(context),
      ),
    );
  }

  List<Widget> businessLogic(BuildContext context) {
    List<Widget> temp = [];
    for (var i = 1; i < newsFeedCount+1; i++) {
      if (i % 6 == 1) {
        temp.add(renderGrids(context));
      }
      if (i % 6 == 0) {
        temp.add(renderLists(context));
      }
    }
    return temp;
  }

  Widget renderScrollArea(BuildContext context) {
    final scrollableArea = CustomScrollView(
      slivers: businessLogic(context),

      // Below lines are neglected as we have more complex requirement
      // slivers: <Widget>[
      //   renderGrids(context),
      //   renderLists(context),
      //   renderGrids(context),
      //   renderLists(context),
      // ],
    );
    return scrollableArea;
  }

  Widget renderLists(BuildContext context) {
    final lists = SliverList(
      delegate: SliverChildListDelegate(
        [
          NewsFeed(),
        ],
      ),
    );
    return lists;
  }

  Widget renderGrids(BuildContext context) {
    final grids = SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      delegate: SliverChildListDelegate(
        [
          NewsFeed(),
          NewsFeed(),
          NewsFeed(),
          NewsFeed(),
          NewsFeed(),
          NewsFeed(),
        ],
      ),
    );
    return grids;
  }
}

class NewsFeed extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white30,
        border: Border.all(
          color: Colors.black26,
          width: 1.0,
        ),
      ),
      padding: EdgeInsets.all(16.0),
      child: Center(
        child: Text("Content"),
      ),
    );
  }
}

演示