Flutter中如何用FloatingActionButton添加ListView元素？状态异常求助

问题说明 #

学习Flutter状态管理时触发异常：

Lookup failed: addTiles in @methods in _MyTileState in package:app_recipes/main.dart

提供的代码如下：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHome(),
    );
  }
}

class MyHome extends StatelessWidget {
  const MyHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('My App'),
      ),
      body: const MyTile(),
    );
  }
}

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

  @override
  State<MyTile> createState() => _MyTileState();
}

class _MyTileState extends State<MyTile> {
  int _tileCount = 5;

  void _addTiles()
  {
    setState(() {
      _tileCount += 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: _MyTileState()._tileCount,
        itemBuilder: (BuildContext context, index)
        {
          return  ListTile(
            leading: const Icon(Icons.list),
            trailing: Text(
              'Tile $_tileCount'
            ),
          );
        }
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _addTiles,
        child: const Icon(Icons.add),
      ),
    );
  }
}

错误原因及修复 #

核心错误点 #

1. 非法创建状态实例：ListView.builder的itemCount用_MyTileState()._tileCount新建了一个未关联当前Widget的状态实例，既无法共享状态，还因直接访问私有成员触发异常。需直接使用当前状态的_tileCount变量。
2. 嵌套Scaffold：MyHome已返回Scaffold，MyTile的build方法再次返回Scaffold，导致界面层级混乱。

修复后代码（优化结构版） #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHome(),
    );
  }
}

class MyHome extends StatefulWidget {
  const MyHome({Key? key}) : super(key: key);

  @override
  State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  int _tileCount = 5;

  void _addTiles() {
    setState(() {
      _tileCount += 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('My App'),
      ),
      body: ListView.builder(
        itemCount: _tileCount,
        itemBuilder: (BuildContext context, index) {
          return ListTile(
            leading: const Icon(Icons.list),
            trailing: Text('Tile ${index + 1}'), // 显示当前项序号而非总数量
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _addTiles,
        child: const Icon(Icons.add),
      ),
    );
  }
}

保留MyTile组件的修复版（推荐回调传参） #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHome(),
    );
  }
}

class MyHome extends StatefulWidget {
  const MyHome({Key? key}) : super(key: key);

  @override
  State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  int _tileCount = 5;

  void _addTiles() {
    setState(() {
      _tileCount += 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('My App'),
      ),
      body: MyTile(tileCount: _tileCount),
      floatingActionButton: FloatingActionButton(
        onPressed: _addTiles,
        child: const Icon(Icons.add),
      ),
    );
  }
}

class MyTile extends StatelessWidget {
  final int tileCount;

  const MyTile({super.key, required this.tileCount});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: tileCount,
      itemBuilder: (BuildContext context, index) {
        return ListTile(
          leading: const Icon(Icons.list),
          trailing: Text('Tile ${index + 1}'),
        );
      },
    );
  }
}

修复总结 #

• 禁止直接创建State类实例访问成员，使用当前状态的变量。
• 避免嵌套Scaffold，保持界面层级清晰。
• 组件间状态传递优先用参数或回调，而非直接查找状态实例。

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