我在 Flutter 上使用 ListView.Builder 时遇到问题

Question

我想在列表中再添加一项。我知道该项目会进入列表，但它不会在第一个屏幕上给我预览。

import 'package:flutter/material.dart';

void main() => runApp(BytebankApp());
class BytebankApp extends StatelessWidget {
  BytebankApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListaTransferencias(),
      ),
    );
  }
}

class FormularioTransferencia extends StatelessWidget {
  final TextEditingController _controladorCampoNumeroConta =
      TextEditingController();
  final TextEditingController _controladorCampoValor = TextEditingController();

  FormularioTransferencia({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Criando Transferência'),
        ),
        body: Column(
          children: <Widget>[
            Editor(
              controlador: _controladorCampoNumeroConta,
              rotulo: 'Numero da conta',
              dica: '0000',
            ),
            Editor(
              controlador: _controladorCampoValor,
              rotulo: 'Valor',
              dica: '0.00',
              icone: Icons.monetization_on,
            ),
            ElevatedButton(
              onPressed: () => _criaTransferencia(context),
              child: Text('Confirmar'),
            )
          ],
        ));
  }

  void _criaTransferencia(BuildContext context) {
    final int? numeroConta = int.tryParse(_controladorCampoNumeroConta.text);
    final double? valor = double.tryParse(_controladorCampoValor.text);
    if (numeroConta != null && valor != null) {
      final transferenciaCriada = Transferencia(valor, numeroConta);
      debugPrint('Criando transferencia');
      debugPrint('$transferenciaCriada');
      Navigator.pop(context, transferenciaCriada);
    }
  }
}

class Editor extends StatelessWidget {
  final TextEditingController controlador;
  final String rotulo;
  final String dica;
  final IconData? icone;

  Editor(
      {super.key,
      required this.controlador,
      required this.rotulo,
      required this.dica,
      this.icone});

//...
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: TextField(
        controller: controlador,
        style: TextStyle(fontSize: 24.0),
        decoration: InputDecoration(
          icon: icone != null ? Icon(icone) : null,
          labelText: rotulo,
          hintText: dica,
        ),
        keyboardType: TextInputType.number,
      ),
    );
  }
}

class ListaTransferencias extends StatefulWidget {
  final List<Transferencia> _transferencias = <Transferencia> [];
  @override

  State<StatefulWidget> createState() {
    return ListaTransferenciasState();
  }
}

class ListaTransferenciasState extends State<ListaTransferencias> {
  @override
  Widget build(BuildContext context) {
    int tamanho = widget._transferencias.length;
    debugPrint('Tamanho: $tamanho');
    widget._transferencias.add(Transferencia(200.0, 2000));
    tamanho++;
    debugPrint('Tamanho: $tamanho');
    widget._transferencias.add(Transferencia(300.0, 3000));
    tamanho++;
    debugPrint('Tamanho: $tamanho');
    widget._transferencias.add(Transferencia(400.0, 4000));
    tamanho++;
    debugPrint('Tamanho: $tamanho');
    widget._transferencias.add(Transferencia(500.0, 5000));
    tamanho++;
    debugPrint('Tamanho: $tamanho');
    return Scaffold(
      appBar: AppBar(
        title: Text('Transferências'),
      ),
      body: ListView.builder(
        itemCount: tamanho,
        itemBuilder: (context, indice) {
          final transferencia = widget._transferencias[indice];
          return ItemTransferencia(transferencia);
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          final Future<Transferencia?> future =
              Navigator.push(context, MaterialPageRoute(builder: (context) {
            return FormularioTransferencia();
          }));
          future.then((transferenciaRecebida) {
            debugPrint('chegou no then do future');
            debugPrint('$transferenciaRecebida');
            debugPrint('$tamanho');
            widget._transferencias.add(transferenciaRecebida!);
            Transferencia confere = widget._transferencias[tamanho];
            tamanho++;
            debugPrint('$confere');
            debugPrint('$tamanho');
          });
        },
      ),
    );
  }
}

class ItemTransferencia extends StatelessWidget {
  final Transferencia _transferencia;

  ItemTransferencia(this._transferencia, {super.key});

  @override
  Widget build(BuildContext context) {
    return Card(
        child: ListTile(
      leading: Icon(Icons.monetization_on),
      title: Text(_transferencia.valor.toString()),
      subtitle: Text(_transferencia.numeroConta.toString()),
    ));
  }
}

class Transferencia {
  final double valor;
  final int numeroConta;

  Transferencia(this.valor, this.numeroConta);

  @override
  String toString() {
    return 'Transferencia{valor: $valor, numeroConta: $numeroConta}';
  }
}

我不知道这是否是 Dart/Flutter 语法错误，但我已经尝试将它们直接添加到列表索引中，并且我已经检查了这些项目是否包含在列表中，因为它们是在 debugPrint 中打印的

Answer 1

我认为你没有正确实现

createState

类的抽象

statefulWidget

方法。

这是你所做的：

class ListaTransferencias extends StatefulWidget {
  final List<Transferencia> _transferencias = <Transferencia> [];
  @override

  State<StatefulWidget> createState() {
    return ListaTransferenciasState();
  }
}

修复

class ListaTransferencias extends StatefulWidget {
  
  @override
  State<ListaTransferencias> createState()=> ListaTransferenciasState();
  
}

createState

方法应该返回正在构建的小部件的状态。

有关更多信息，请参阅statefulWidget