Блог

Как сделать автоматический интервал в listview.builder().Например, мне нужно что-то вроде MainAxisAlignment.spaceEvenly в столбце, но мне это нужно в list view.builder().У меня будет два или три не прокручиваемых горизонтальных элемента.Поэтому мне нужен интервал между элементами для разных размеров экрана.Не могли бы вы мне помочь.

 ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 3,//list.length expected two or three
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                    borderRadius: const BorderRadius.all(Radius.circular(10.0)),
                    color: Colors.amber,
                    border: Border.fromBorderSide(
                      BorderSide(
                        color: Color(0xFF8D4AE9),
                        width: 1.0,
                      ),
                    ),
                  ),
                );
              },
            ),
  

Например, изображение
введите описание изображения здесь

добавьте поля и отступы столько, сколько захотите.

 ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 7,//list.length expected two or three
        itemBuilder: (BuildContext context, int index) {
          return Container(
            height: 100,
            width: 100,
            margin: EdgeInsets.all(10),// add margin 
            padding: EdgeInsets.all(10),// add padding
            decoration: BoxDecoration(
              borderRadius: const BorderRadius.all(Radius.circular(10.0)),
              color: Colors.amber,
              border: Border.fromBorderSide(
                BorderSide(
                  color: Color(0xFF8D4AE9),
                  width: 1.0,
                ),
              ),
            ),
          );
        },
      )
  

Вы можете попробовать добавить a SizedBox с фиксированным height: или width: или даже оба между нужным вам контентом. Другим решением является добавление Padding с равными значениями.

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

Попробуйте этот код:

 Container(
      height: 100,width: MediaQuery.of(context).size.width,
      child:
      ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 13,
        itemBuilder: (context, i) {
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              width: 100,
              decoration: BoxDecoration(
                color: Colors.black,
                ),
              ),
            );
        },
      ),
    ),