Блог

Я хочу показать элементы списка в смешанном макете, где первые два элемента будут в макете карты во всю ширину, а следующие два элемента будут в макете сетки.

до сих пор я пытался разделить элементы, разделяя четные, добавляя числа, но застрял на следующем условии, не уверен, является ли это хорошим подходом для достижения этой цели.

любое предложение будет оценено.

 ListView.builder(
            key: PageStorageKey("topNewsListKey"),
            itemCount: _newsList.length   (_hasMore ? 1 : 0),
            itemBuilder: (context, index) {
              if(index % 2 == 0) {
                print('even numbers $index');
                if( ) {  // condition to divide index 0,4,8...
                   return fullWidthCardLayout();
                } else {
                  return gridLayout();
                }
              } else {
                print('odd numbers $index');
                if() {  // condition to divide index 1,5,9...
                  return fullWidthCardLayout();
                } else {
                  return gridLayout();
                }
              }
            });

 

используйте ListView.separated и создавайте сетку в separator builder с проверкой индекса, если вы хотите повторять только после 2 или трех виджетов.

   ListView.separated(
      itemCount: 25,
      separatorBuilder: (BuildContext context, int index){
        if (index.isEven) {
          return YourGridWidget();
        } },                   
        itemBuilder: (BuildContext context, int index) { 
        return YourListTileWidget(); },
   )
 

@Sreejit Ответ N S правильный. Я внес в него некоторые изменения, см. Мой Приведенный Ниже код, и он работает так, как вам нужно

 class _GridListViewState extends State<GridListView> {
  List<String> _list = [
    "item 1",
    "item 2",
    "item 3",
    "item 4",
    "item 5",
    "item 6",
    "item 7",
    "item 8",
    "item 9",
    "item 10",
    "item 11",
    "item 12",
    "item 13",
    "item 14",
    "item 15",
    "item 16",
    "item 17",
    "item 18",
    "item 19",
    "item 20",
  ];
  int counter = 0;//counter will handle unique index in both list amp; grid

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue[900],
        title: Text('My List'),
      ),
      body: ListView.separated(
        itemCount: _list.length,
        separatorBuilder: (BuildContext context, int index) {
          if (index.isOdd amp;amp; counter   1 < _list.length) {
            return getGrid();
          } else
            return Container();//return blank widget
        },
        itemBuilder: (BuildContext context, int index) {
          if (counter < _list.length) {
            return listRow(counter  );
          } else
            return Container();//return blank widget
        },
      ),
    );
  }

  Widget getGrid() {
    return Container(
      height: 200,
      child: GridView.count(
        crossAxisCount: 1,
        scrollDirection: Axis.horizontal,
        children: List.generate(2, (index) {
          return listRow(counter  );
        }),
      ),
    );
  }

  Widget listRow(int index) {
    return GestureDetector(
      onTap: () {
        print(_list[index]);
      },
      child: Card(
        margin: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Text(_list[index]),
        ),
        elevation: 2,
      ),
    );
  }
}
 

Вы можете создать List<Widget> mixedLayoutList = <Widget>[] и поместить в него любые макеты, которые вы хотите, а затем, чтобы добавить все элементы списка в ListView, используйте его следующим образом:

 ListView(
  children:[]..addAll(mixedLayoutList),
)
 

вы также можете добиться этого с помощью ListView.builder follow this Создание списков с различными типами элементов, предоставляемых командой flutter.