flutter - 如何在 flutter 中的for循环中动态创建scrollController

Question

我想按类别显示一些项目。我可以用 Map 做到这一点，但它们都依赖于单个 scrollController。由于没有固定数量的类别，我不能静态地做。
如何在 Map 中动态创建 scrollController。
这两行给了我错误。

ScrollController  scrollName = 'scrollName'+extra.id.toString();
 ScrollController  scrollName = new ScrollController();

我的代码

Column(
            children: order!.extraOrders!.map((extra) {
                            ScrollController  scrollName = 'scrollName'+extra.id.toString();
                            ScrollController  scrollName = new ScrollController();
                            return SingleChildScrollView(
                              scrollDirection: Axis.horizontal,
                              controller: 'dymanicNameWillBe',
                              child: Row(
                                children: extra.items!.map((e) {
                                  return Padding(
                                      padding: const EdgeInsets.only(
                                          right: 10.0,
                                          bottom: 10,
                                          top: 30,
                                          left: 10),
...

Answer 1

首先，这两行出现错误是正常的。
由于您正在尝试定义 字符串 至 滚动 Controller object，Flutter 会向这一行抛出错误；

ScrollController  scrollName = 'scrollName'+extra.id.toString();
A value of type 'String' can't be assigned to a variable of type 'ScrollController'.

在第二行，因为你已经定义了一个名为 的变量(即使它不是一个正确的定义)滚动名称 ,
Flutter 会向这一行抛出错误；

ScrollController  scrollName = new ScrollController();
The name 'scrollName' is already defined.

此外，当您想将滚动 Controller 定义为 时SingleChildScrollView 该对象应该是一个 ScrollController，而不是一个字符串。

动态滚动 Controller 解决方案

为 定义一个全局列表滚动 Controller 并将其初始化为与您的项目列表相同的长度。

通过滚动 Controller 您的 中索引处的项目滚动 Controller 将 Controller 列为 SingleChildScrollView

示例代码；

// Global scroll controllers list
List<ScrollController> controllersForExtraOrders = [];

// Arrange global scroll controller list
arrangeExtraOrderScrollControllers() {
   order?.extraOrders?.forEach((extraOrder) {
     ScrollController controller = ScrollController();
     controllersForExtraItems.add(controller);
   });
}

// Build UI with this global scroll controller list
Widget build(BuildContext context) {
   
   ...

   Column(children: order!.extraOrders!.map((extra) {
        
        // Get the extra order index.
        int extraOrderIndex = order!.extraOrders!.indexOf(extra);
        return SingleChildScrollView(
           scrollDirection: Axis.horizontal,
           // Pass the controller at extraOrderIndex
           controller: controllersForExtraItems[extraOrderIndex],
           child: ....
        );
        ...
    }

    ...
}

奖金 ;
如果您想滑动到下一个项目，请获取该动态列表的滚动 Controller 并执行您的操作。

slideToNextItem(int extraOrderIndex) {
    SlideController slideController = controllersForExtraItems[extraOrderIndex];
    slideControllerExtra.animateTo(
       slideControllerExtra.position.pixels + 190,
       duration: Duration(milliseconds: 500),
       curve: Curves.ease,
    );
}

快乐编码!