ทำความเข้าใจกับ ListView.builder
โอเคฉันคิดว่าฉันติดอยู่กับตัวสร้างกระพือปีกนิดหน่อย
ฉันได้สร้างแอพง่ายๆเพื่อให้คำถามง่ายขึ้น:
ฉันมีคลาสข้อมูล:
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 ได้หรือไม่
ฉันพยายามหลายครั้ง แต่ไม่สามารถรับคุณสมบัติได้อย่างถูกต้องจากแบบฟอร์มและอัปเดต listtile โดยใช้ตัวสร้างต้องการความช่วยเหลือ
ไชโย!
คำตอบ
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];
}
)
)
ลองใช้วิธีนี้อาจช่วยแก้ปัญหาของคุณได้
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