在 ListView Flutter 中滚动到索引

Question

在我的应用程序中，我在 appBar 中列出了几个具有产品类别名称的容器，这些类别与它们各自的产品一起列在正文中。

appBar 中的 ListView 与主体的 ListView 具有相同的索引，因此我们的想法是按下 appBar 中的索引“x”，用户将被重定向到主体中的索引“x”。

我尝试了很多解决方案，其中一个是包https://pub.dev/packages/scrollable_positioned_list，但它没有用，因为当调用函数滚动时，我的列表就消失了。

这是代码：

return Scaffold(
  backgroundColor: Colors.white,
  appBar: PreferredSize(
    preferredSize: Size.fromHeight(120),
    child: Column(
      children: [
        AppBar(...),
        Expanded(
          child: Container(
            color: AppColors.primary,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: widget.listaProdutos.length,
              itemBuilder: (context, index) {
                return Padding(
                  padding: EdgeInsets.symmetric(...),
                  child: GestureDetector(
                    child: Container(
                      decoration: BoxDecoration(...),
                      child: Padding(...),
                        child: Center(
                          child: Text(
                            widget.listaProdutos[index].dsGrupo,
                            style: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ),
                    ),
                    onTap: () {
                      SHOULD SCROLL TO INDEX
                    },
                  ),
                );
              },
            )
          ),
        ),
      ],
    ),
  ),
  body: SingleChildScrollView(
    child: Column(
      children: [
        Container(
          child: ListView.builder(
            physics: NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            itemCount: widget.listaProdutos.length,
            itemBuilder: (context, indexGrupo) {
              return Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Card(...),
                  ListView.builder(..),
                ],
              );
            },
          ),
        ),
      ],
    ),
  ),
);

Answer 1

您可以将 PageView 与scrollDirection: Axis.vertical, 一起使用

class TFW extends StatefulWidget {
  const TFW({super.key});

  @override
  State<TFW> createState() => _TFWState();
}

class _TFWState extends State<TFW> {
  final PageController controller = PageController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          bottom: PreferredSize(
        preferredSize: Size.fromHeight(100),
        child: Expanded(
          child: ListView.builder(
            itemCount: 100,
            scrollDirection: Axis.horizontal,
            itemBuilder: (context, index) {
              return InkWell(
                onTap: () {
                  controller.animateToPage(index,
                      duration: Duration(milliseconds: 400),
                      curve: Curves.easeIn);
                },
                child: SizedBox(width: 100, child: Text("$index")),
              );
            },
          ),
        ),
      )),
      body: PageView.builder(
        controller: controller,
        itemCount: 100,
        scrollDirection: Axis.vertical,
        itemBuilder: (context, index) {
          return Container(
            color: index.isEven ? Colors.red : Colors.blue,
            child: Text("$index"),
          );
        },
      ),
    );
  }
}