Flutter中如何点击按钮后将for循环值显示在应用界面？

你的代码问题在于：点击按钮时只是创建了Text组件，但没有把这些组件加入到Widget树中。Flutter的UI是声明式的，必须通过更新状态触发UI重建，才能让新组件显示在界面上。

解决方案步骤 #

• 在状态类中定义列表变量，存储要显示的数值
• 点击按钮时，更新列表数据并调用setState触发UI刷新
• 在build方法中，根据列表渲染对应的Text组件

修改后的完整代码 #

class _MyHomePageState extends State<MyHomePage> {
  // 存储要显示的数字列表
  List<int> _displayNumbers = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("For 循环"),
      ),
      body: Column(
        children: [
          ElevatedButton(
            child: Text("显示数字"),
            onPressed: () {
              setState(() {
                // 清空旧数据，避免重复添加
                _displayNumbers.clear();
                // 循环生成数字并添加到列表
                for (int i = 0; i < 15; i++) {
                  _displayNumbers.add(i);
                }
              });
            },
          ),
          // 用可滚动列表展示数字，避免内容溢出
          Expanded(
            child: ListView.builder(
              itemCount: _displayNumbers.length,
              itemBuilder: (context, index) {
                return Padding(
                  padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
                  child: Text("数字：${_displayNumbers[index]}"),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

代码说明 #

• _displayNumbers作为状态变量，保存需要展示的数字集合
• 点击按钮时在setState内更新列表，Flutter会自动重新执行build方法刷新UI
• 使用ListView.builder渲染列表，适合处理数量较多的元素，避免界面溢出；如果数字数量固定且很少，也可以直接用Column配合SingleChildScrollView

内容的提问来源于stack exchange，提问作者Zeynep Baysoy