Flutter技术问题：如何将map遍历的索引传递至Scaffold其他组件

嘿，这个问题我之前也碰到过！核心问题是list.map里的index是循环内的局部变量，没法直接传递到外部的buttonTextBuild组件中。咱们可以通过维护一个组件级的状态变量来解决这个问题，具体实现步骤如下：

步骤1：添加状态变量保存当前索引 #

在你的State类中新增一个状态变量，用来存储当前显示的卡片索引：

int _currentCardIndex = 0; // 默认初始值，可根据需求调整

步骤2：在map遍历中更新状态变量 #

在SwipeStack的children构建逻辑里，每次遍历到新的index时，更新这个状态变量（如果是动态滑动切换卡片，也可以在滑动回调里更新，这里根据你的遍历逻辑调整）：

body: SwipeStack(
  children: list.map((index) {
    // 每次遍历到新的index时，更新状态变量
    setState(() {
      _currentCardIndex = index;
    });
    // 原来的子组件构建代码...
    return YourCardWidget(index: index);
  }).toList(),
),

步骤3：修改buttonTextBuild使用状态变量 #

更新buttonTextBuild方法，直接访问状态变量来获取当前索引：

Widget buttonTextBuild(BuildContext context) {
  if (isOutOfCards == false) {
    return Container(
      child: Text(
        '$_currentCardIndex/${articleList.length}',
        textAlign: TextAlign.left,
        style: TextStyle(
          fontSize: 12.75,
          fontWeight: FontWeight.w500,
          letterSpacing: 1
        )
      )
    );
  } else {
    return Container(
      child: Text(
        'Start Again',
        textAlign: TextAlign.left,
        style: TextStyle(
          fontSize: 12.75,
          fontWeight: FontWeight.w500,
          letterSpacing: 1
        )
      )
    );
  }
}

完整修改后的代码示例 #

Iterable<int> get positiveIntegers sync* { 
  int i = articleList.length - 1; 
  while (true) yield i--; 
}

// 新增状态变量
int _currentCardIndex = 0;

@override 
Widget build(BuildContext context) { 
  int getLength = articleList.length; 
  var list = positiveIntegers.take(getLength).toList(); 
  return Scaffold( 
    appBar: AppBar( 
      title: new Text( 
        'Popular', 
        textAlign: TextAlign.center, 
      ), 
      textTheme: TextTheme( 
        title: TextStyle( 
          fontSize: 16, 
          fontWeight: FontWeight.w700, 
          color: Colors.black
        )
      ),
      backgroundColor: Colors.white, 
      centerTitle: true, 
      elevation: 0.0, 
    ), 
    body: SwipeStack( 
      children: list.map((index) { 
        // 更新当前索引状态
        setState(() {
          _currentCardIndex = index;
        });
        // 这里是你原来的卡片组件代码，示例如下：
        return Card(
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Text('Card Content $index'),
          ),
        );
      }).toList(), 
    ),
    floatingActionButton: Container( 
      margin: EdgeInsets.only(top: 25, bottom: 25, left: 20), 
      alignment: Alignment(0, 1), 
      child: new Row( 
        children: <Widget>[ 
          RawMaterialButton( 
            onPressed: () { 
              if (isOutOfCards == true) { 
                setState(() { 
                  isOutOfCards = false; 
                }); 
              } 
            }, 
            child: iconBuild(context), 
            shape: new CircleBorder(), 
            fillColor: Colors.red[700], 
            splashColor: Colors.transparent, 
            highlightColor: Colors.transparent, 
            padding: const EdgeInsets.all(11), 
          ), 
          buttonTextBuild(context), 
        ], 
      ), 
    ), 
  ); 
}

Widget buttonTextBuild(BuildContext context) { 
  if (isOutOfCards == false) { 
    return Container( 
      child: Text(
        '$_currentCardIndex/${articleList.length}', 
        textAlign: TextAlign.left, 
        style: TextStyle( 
          fontSize: 12.75, 
          fontWeight: FontWeight.w500, 
          letterSpacing: 1
        )
      )
    ); 
  } else { 
    return Container( 
      child: Text(
        'Start Again', 
        textAlign: TextAlign.left, 
        style: TextStyle( 
          fontSize: 12.75, 
          fontWeight: FontWeight.w500, 
          letterSpacing: 1
        )
      )
    ); 
  }
}

补充说明 #

如果你的卡片是通过滑动交互切换的，建议把索引更新逻辑放在SwipeStack的滑动回调（比如onSwipeCompleted）里，这样会更贴合实际的用户交互流程，避免遍历过程中频繁触发setState。

内容的提问来源于stack exchange，提问作者Dray Tey