Как добавить элементы ListView с помощью FloatingActionButton во флаттер?

В настоящее время я изучаю флаттер, и у меня проблемы с управлением состояниями. Я использовал это руководство по флаттеру в качестве справки: https://docs.flutter.dev/ui/interactive#managing-state.

Я получаю исключение: «Ошибка поиска: addTiles в @methods в _MyTileState в пакете: 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),
      ),
    );
  }
}

в itemCount удалите _MyTileState(), просто используйте _tileCount или this._tileCount

Sowat Kheang 08.06.2023 11:04
0
1
56
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Я решил это, даже если я не совсем понял, почему это вызывает проблему.

Завершающее свойство ваших плиток списка отображает не текущий индекс плитки, а количество плиток. Это покажет одну и ту же строку для каждой плитки, но не должно создавать проблем при добавлении дополнительных плиток. Тем не менее, измените Tile $_tileCount на Tile $index, чтобы исправить это.

return ListTile(
  leading: const Icon(Icons.list), 
  trailing: Text(
    'Tile $index'
  ),
);
Ответ принят как подходящий

Вы получаете доступ к _tileCount через _MyTileState(), который является общим объектом, а не текущим экземпляром.

Вы можете использовать this._tileCount или просто _tileCount.

Вы должны использовать _tileCount вместо _MyTileState()._tileCount, потому что вы создаете новый экземпляр, вызывая конструктор класса, чтобы он вернулся к умолчанию.

если вы хотите явно указать для этого класса, вы должны использовать this._tileCount, он относится к текущему классу.

Каждый думает нормально, но способ доступа к _tileCount недействителен

Чтобы получить доступ к переменной _tileCount внутри одного и того же класса, вы можете напрямую обратиться к ней по ее имени, не упоминая класс, так как они оба находятся в одной области видимости.

поэтому я просто заменил

itemCount: _MyTileState()._tileCount,

к

itemCount: _tileCount,

или

itemCount: this._tileCount,

Вот окончательный код:

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: _tileCount,
        itemBuilder: (BuildContext context, index)
        {
          return  ListTile(
            leading: const Icon(Icons.list),
            trailing: Text(
              'Tile $index'
            ),
          );
        }
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _addTiles,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Другие вопросы по теме