Flutter技术问题：点击按钮如何切换列表显示的索引值

首先，你需要使用StatefulWidget，因为要动态更新界面状态（索引变化）。下面是完整的实现代码，包含关键逻辑说明：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyWordGame());
}

class MyWordGame extends StatelessWidget {
  const MyWordGame({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('单词小游戏')),
        body: const WordDisplay(),
      ),
    );
  }
}

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

  @override
  State<WordDisplay> createState() => _WordDisplayState();
}

class _WordDisplayState extends State<WordDisplay> {
  // 你的单词列表
  final List<String> _words = ['the', 'dog', 'was', 'a', 'lab'];
  // 当前显示的索引，初始为0
  int _currentIndex = 0;

  // 点击next按钮触发的方法
  void _goToNextWord() {
    setState(() {
      // 避免索引越界，到最后一个单词时可选择循环或禁用按钮
      if (_currentIndex < _words.length - 1) {
        _currentIndex++;
      } else {
        // 可选：回到第一个单词实现循环
        _currentIndex = 0;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 显示当前单词的Container
          Container(
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey),
              borderRadius: BorderRadius.circular(8),
            ),
            child: Text(
              _words[_currentIndex],
              style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
          ),
          const SizedBox(height: 20),
          // Next按钮
          ElevatedButton(
            onPressed: _goToNextWord,
            child: const Text('next'),
          ),
        ],
      ),
    );
  }
}

核心逻辑说明： #

• StatefulWidget：只有带状态的Widget才能通过setState触发界面更新，所以把单词显示模块封装成StatefulWidget。
• setState：调用该方法会通知Flutter框架状态变更，重新构建界面，从而展示新的单词。
• 索引边界处理：在切换方法里判断当前索引是否未到列表末尾，防止数组越界；如果到最后一个单词，你可以选择禁用按钮或者循环回到第一个，代码里用了循环逻辑，可按需修改。

内容的提问来源于stack exchange，提问作者Joe Shaw