Блог

Текущий макет Желаемый макет Я пытался поиграть со строками и столбцами, но это не дает мне желаемого макета. Я озадачен тем, как сделать так, чтобы нижний ряд перекрывался с верхним. Я использую ListView.builder для динамического создания этих контейнеров. Это мой код для ListView.builder:

 ListView.builder(
                      scrollDirection: Axis.horizontal,
                      itemCount: moduleCount,
                      itemBuilder: (BuildContext context, int index) {
                        /*
                        Makes graphicModule decrease in size as more
                        modules are being displayed
                         */
                        if (moduleCount > 6) {
                          containerWidth = 112.5;
                        } else {
                          containerWidth = 150;
                        }

                        if (index.isEven) {
                          return Column(
                            children: <Widget>[
                              makeGraphicModule(
                                  index   1, containerWidth, moduleCount),
                              SizedBox(
                                height: 50,
                              ),
                            ],
                          );
                        } else {
                          return Column(
                            children: <Widget>[
                              SizedBox(
                                height: 50,
                              ),
                              makeGraphicModule(
                                  index   1, containerWidth, moduleCount),
                            ],
                          );
                        }
                      },
                    ),
 

Используйте верхнюю часть поля для нечетных контейнеров

 ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: moduleCount,
          itemBuilder: (BuildContext context, int index) {
            if (moduleCount > 6) {containerWidth = 112.5;} 
            else {containerWidth = 150;}
          return Container(
              margin: EdgeInsets.only(top: index.isEven ? 0 : 50),
              child: makeGraphicModule(
                    index   1, containerWidth, moduleCount),
                    );,
          }
      ),