Блог

Как заставить ListView.builder () показывать часть следующего (или предыдущего) элемента.

У меня есть ListView.builder() , и он работает нормально, но я хочу, чтобы пользователь знал, что есть функция прокрутки и что им нужно прокручивать.

Как этого добиться?

Мой вывод:-

Ожидаемый результат:-

Как этого добиться?

Вот мой код

 
    return FutureBuilder(
            future: categories,
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              return ListView.builder(
                  itemCount: snapshot.data.length,
                  scrollDirection: Axis.horizontal,
                  itemBuilder: (context, index) {
                    return GestureDetector(
                      child: Padding(
                        padding: const EdgeInsets.all(4.0),
                        child: Container(
                          child: Padding(
                            padding:
                                const EdgeInsets.fromLTRB(16.0, 7.0, 16.0, 10.0),
                            child: Text(
                              snapshot.data[index].name,
                              style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 18.0,
                                  fontWeight: FontWeight.bold),
                            ),
                          ),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(25.0),
                            color: colors[index],
                          ),
                        ),
                      ),
                      onTap: () => Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => Posts(
                                    type: PostsFetchByType.categories,
                                    categoryOrTagIds: [snapshot.data[index].id],
                                  ))),
                    );
                  });
            });

 

Создайте scrollcontroller с начальным смещением:

 scrollController = ScrollController(
   initialScrollOffset: 10 // put your value here
);
 

затем добавьте его в свой ListViewBuilder:

 return ListView.builder(
    ...
    controller: scrollController,
    ...
)
 

Но поскольку вы хотите показать, что он доступен для прокрутки, вы также можете взглянуть на добавление полосы прокрутки, обернув ListViewBuilder следующим образом:

 Scrollbar(
    child: ListView.builder(...),
)