ListView.builder 이해

Question

좋아요, 그래서 저는 플러터 빌더에 조금 갇혀있는 것 같아요.

내 질문을 더 쉽게 만들기 위해 간단한 앱을 만들었습니다.

데이터 클래스가 있습니다.

    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'),
    ),
  ];
}

그리고 주요 다트 파일 :

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,
      ),
    );
  }
}

문제는 다른 방식으로 작동하도록 만들 수 없다는 것입니다. 누군가 내 구현을 ListView.builder로 변경할 수 있습니까? 나는 조금 붙어 있습니다 :( 주요 목표 :

아이디어 : 버튼 클릭-> 양식 표시-> 제출 버튼을 누르면 목록이 즉시 업데이트됩니다. 나중에 삭제 기능을 추가하고, 문서 만 배우면됩니다.

누군가 내 코드를 검토하고 아무도 마음에 들지 않으면 동일한 아이디어를 다시 작성하려고 시도 할 수 있지만 ListView.builder를 사용합니까?

여러 번 시도했지만 양식에서 속성을 올바르게 가져올 수 없으며 빌더를 사용하여 목록 타일을 업데이트하고 도움이 필요합니다.

건배!

Answer 1

ListView.builder 에는 정적 높이가 필요하므로 그 높이를 추적하십시오. 이제 사용하려는 질문에 대해 ListView.builder. 이것을 통해 할 수 있습니다

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

Answer 2

이것을 시도하면 문제가 해결 될 수 있습니다.

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

또는 ListView.builder()

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

추가 참조 : https://api.flutter.dev/flutter/material/ListTile-class.html