如何借助active布尔值逐个显示列表中的字符串？

要实现点击按钮逐个切换显示列表中的字符串，你可以保留原有的active布尔值，同时新增一个索引变量来跟踪当前显示的列表元素位置，具体修改如下：

完整修改代码 #

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

  @override
  State<YourWidget> createState() => _YourWidgetState();
}

class _YourWidgetState extends State<YourWidget> {
  // 将字符串列表移至状态类中，避免重复创建
  final List<String> randomWords = ['HI', 'Bye', 'Ciao', 'Leaf'];
  int currentIndex = 0;
  bool active = false;

  void _handleTap() {
    setState(() {
      active = !active;
      // 每次切换active时，索引自增，超出列表长度后重置为0（实现循环切换）
      currentIndex = (currentIndex + 1) % randomWords.length;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _handleTap,
      child: Container(
        width: 200,
        height: 200,
        color: Colors.blue, // 新增背景色方便识别按钮区域
        child: Center(
          child: Text(
            randomWords[currentIndex],
            style: const TextStyle(fontSize: 25, color: Colors.white),
          ),
        ),
      ),
    );
  }
}

关键修改说明 #

• 列表位置调整：把字符串列表从build方法移到State类中作为成员变量，避免每次组件重建时重复创建列表，提升性能。
• 索引变量跟踪：新增currentIndex变量，用来记录当前显示的列表元素下标，初始值为0（默认显示第一个元素）。
• 点击逻辑更新：在_handleTap方法中，切换active布尔值的同时，通过(currentIndex + 1) % randomWords.length实现索引循环递增——当索引到达列表最后一个元素后，点击会自动回到第一个元素。
• 移除无用代码：删除原代码中未使用的DropdownMenuItem循环代码，简化结构。

可选调整 #

如果不需要循环切换，希望到最后一个元素后停止切换，可将_handleTap中的索引更新逻辑改为：

if (currentIndex < randomWords.length - 1) {
  currentIndex++;
}

内容的提问来源于stack exchange，提问作者Spicy Pumpkin