Zrozumienie ListView.builder

Question

Okej, więc myślę, że utknąłem trochę z budowniczym trzepotania.

Stworzyłem prostą aplikację, żeby moje pytanie było łatwiejsze:

Mam klasę danych:

    class DataLists {
  List<ListTile> lists = [
    ListTile(
      leading: Text('Tile Leading 1'),
      title: Text('Tile Title 1'),
      subtitle: Text('Tile Subtitle 1'),
      trailing: Text('Tile Trailing 1'),
    ),
    ListTile(
      leading: Text('Tile Leading 2'),
      title: Text('Tile Title 2'),
      subtitle: Text('Tile Subtitle 2'),
      trailing: Text('Tile Trailing 2'),
    ),
    ListTile(
      leading: Text('Tile Leading 3'),
      title: Text('Tile Title 3'),
      subtitle: Text('Tile Subtitle 3'),
      trailing: Text('Tile Trailing 3'),
    ),
    ListTile(
      leading: Text('Tile Leading 4'),
      title: Text('Tile Title 4'),
      subtitle: Text('Tile Subtitle 4'),
      trailing: Text('Tile Trailing 4'),
    ),
    ListTile(
      leading: Text('Tile Leading 5'),
      title: Text('Tile Title 5'),
      subtitle: Text('Tile Subtitle 5'),
      trailing: Text('Tile Trailing 5'),
    ),
  ];
}

I główny plik rzutek:

import 'package:flutter/material.dart';
import 'package:learning/data.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TestTile(),
    );
  }
}

class TestTile extends StatefulWidget {
  @override
  _TestTileState createState() => _TestTileState();
}

class _TestTileState extends State<TestTile> {
  DataLists dataLists = DataLists();
  TextEditingController leadingController = TextEditingController();
  TextEditingController titleController = TextEditingController();
  TextEditingController subtitleController = TextEditingController();
  TextEditingController trailingController = TextEditingController();
  Future<String> createDialog(BuildContext context) {
    return showDialog(context: context, builder: (context) {
      return SimpleDialog(
        title: Text('Input data: '),
        children: [
          TextField(
            controller: leadingController,
          ),
          TextField(
            controller: titleController,
          ),
          TextField(
            controller: subtitleController,
          ),
          TextField(
            controller: trailingController,
          ),
          MaterialButton(
            child: Text('Submit'),
            onPressed: () {
              Navigator.of(context).pop(leadingController.text);
              setState(() {
                List<ListTile> tempList = dataLists.lists;
                if (titleController.text.isNotEmpty && leadingController.text.isNotEmpty && subtitleController.text.isNotEmpty && trailingController.text.isNotEmpty) {
                  tempList.add(
                    ListTile(
                      leading: Text(leadingController.text),
                      title: Text(titleController.text),
                      subtitle: Text(subtitleController.text),
                      trailing: Text(trailingController.text),
                    ),
                  );
                  dataLists.lists = tempList;
                } else {
                  print('Null values');
                }
                leadingController.clear();
                titleController.clear();
                subtitleController.clear();
                trailingController.clear();
              });
            },
          ),
        ],
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Tile'),
      ),
      body: Container(
        child: SafeArea(
          child: ListView(
            children: <ListTile>[
              for (ListTile e in dataLists.lists)
                e
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          createDialog(context);
          setState(() {

          });
        },
        child: Icon(Icons.add),
        backgroundColor: Colors.blue,
      ),
    );
  }
}

Problem w tym, że nie mogę sprawić, by działało inaczej. Czy ktoś może zmienić moją implementację na ListView.builder? Trochę utknąłem :( Kluczowy cel:

Pomysł: Kliknij przycisk -> pojawi się formularz -> po naciśnięciu przycisku przesyłania lista jest aktualizowana natychmiastowo Dodam funkcję usuwania później, po prostu uczę się dokumentów, nic więcej.

Czy ktoś może przejrzeć mój kod i, jeśli nikt nie ma nic przeciwko, spróbować przepisać ten sam pomysł, ale używając ListView.builder?

Próbowałem kilka razy, ale nie mogę poprawnie pobrać właściwości z formularza i zaktualizować listtile za pomocą kreatora, potrzebuję pomocy

Twoje zdrowie!

Answer 1

ListView.builder wymaga statycznej wysokości, więc śledź ją. Przechodząc teraz do pytania, którego chcesz użyć ListView.builder. Możesz to zrobić

Container(
  height: give_your_height,
  child: ListView.builder(
    shrinkWrap: true,
    itemCount: dataLists.lists.length,
    itemBuilder: (context, index) {
      return dataLists.lists[index];
    }
  )
)

Answer 2

Spróbuj tego, to może rozwiązać twój problem.

ListView(
   children: [
        for (ListTile e in dataLists.lists)
          Card(child: e)
     ],
  ),

lub z ListView.builder()

ListView.builder(
  itemCount: dataLists.lists.length,
  itemBuilder: (context, index) {
    return dataLists.lists[index];
  },
);

Dalsze odniesienia: https://api.flutter.dev/flutter/material/ListTile-class.html