使 ListView.builder() 显示下一个（或上一个）元素的一小部分

Question

如何使 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],
                                  ))),
                    );
                  });
            });

Answer 1

创建一个带有初始偏移量的滚动控制器：

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

然后将其添加到您的 ListViewBuilder：

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

但是既然你想显示它是可滚动的，你也可以看看通过包装ListViewBuilder来添加滚动条，如下所示：

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

使 ListView.builder() 显示下一个（或上一个）元素的一小部分

Make the ListView.builder() show a fraction of the next (or previous) element

flutter

listview

scroll

android-listview