แบบสอบถามเกี่ยวกับ Flutter ListView

Sep 18 2020

ฉันเรียนรู้เกี่ยวกับ listviews และฉันมีไฟล์โผสองไฟล์ด้านล่างหนึ่งไฟล์ใช้ตัวสร้าง ListView และ Listview อื่น ๆ ผลลัพธ์ทั้งสองแบบให้ผลลัพธ์เดียวกัน ฉันทำตามคู่มือ listview:https://pusher.com/tutorials/flutter-listviews

ด้านล่างนี้เป็นคำถามของฉันใน listview:

  1. ฉันเข้าใจในโลกแห่งความเป็นจริงว่าข้อมูลจะมาจาก API และต้องการทราบว่าจะใช้ตัวเลือกใดต่อไปนี้และเพราะเหตุใด
  2. ฉันเข้าใจถูกต้องหรือไม่ว่าวิดเจ็ตใด ๆ เช่นคอนเทนเนอร์ข้อความสามารถเป็นลูกของภายใน listView ได้หรือไม่
  3. ในอ็อพชัน 1 ลูก ListView คือฟังก์ชัน _buildListItemsFromLocation () นี่เป็นแนวทางปฏิบัติที่ดีหรือเราควรย้ายโค้ด _buildListItemsFromLocation () ไปยังไฟล์ dart แยกกัน

Option1: ListView

class LocationListView extends StatefulWidget {
  @override
  _LocationListViewState createState() => _LocationListViewState();
}

class _LocationListViewState extends State<LocationListView> {

  List<Container> _buildListItemsFromLocation() {
    int index = 0;
    return locationData.map((location) {
      var container = Container(
          child: Row(
            children: [
              Container(
                margin: EdgeInsets.all(10.0),
                child: Image(
                  image: AssetImage(location.imagePath),
                  width: 100.0,
                  height: 100.0,
                  fit: BoxFit.cover,
                ),
              ),
              Container(
                child: Text(location.name),
              )
            ],
          ),
      );
      return container;
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _buildListItemsFromLocation(),
    );
  }
}


ตัวเลือกที่ 2 - ListView.builder

class LocationList extends StatefulWidget {
  @override
  _LocationListState createState() => _LocationListState();
}

class _LocationListState extends State<LocationList> {

  @override
  Widget build(BuildContext context) {
        return ListView.builder(
          itemCount: locationData.length,
          itemBuilder: (context, index) {
            
            return Row(
              children: [
                Container(
                  margin: EdgeInsets.all(10.0),
                  child: Image(
                    image: AssetImage(locationData[index].imagePath),
                    width: 100.0,
                    height: 100.0,
                    fit: BoxFit.cover,
                  ),
                ),
                Container(
                  child: Text(locationData[index].name),
                )
              ],
            );
        }
        );
      }
  }


คำตอบ

2 Souvenir Sep 18 2020 at 09:04
  1. ฉันใช้วิธีที่ 2 เพราะเข้าใจง่ายและทำตามลำดับจากบนลงล่างจึงอ่านโค้ดได้ง่าย
  2. วิดเจ็ตใด ๆ สามารถเป็นลูกของวิดเจ็ตอื่นได้ ขึ้นอยู่กับวิธีการและสิ่งที่คุณใช้สำหรับ
  3. หลายคนบอกว่าเราควรสร้างคลาสอื่นแล้วเรียกใหม่แทนที่จะแยกตามข้างบนเพราะมันมีผลต่อประสิทธิภาพของแอพ ในกรณีที่ใช้มาก แต่เพียงหน้าจอเดียวคุณสามารถใช้วิธีการเดียวกันกับของคุณเองได้ คำตอบอาจมีข้อบกพร่องไม่มีอะไรจะให้ตัวเอง
1 Autocrab Sep 18 2020 at 09:01
  1. หากคุณไม่ทราบขนาดรายการล่วงหน้าให้สร้างผ่านตัวสร้าง

1.1 หากคุณสร้างรายการและคุณรู้ว่าจำนวนองค์ประกอบจะต้องไม่เกินสิบหรือสิบสองคุณสามารถสร้างListViewจากตัวอย่าง 1

  1. เครื่องมือใด ๆ ListViewที่สามารถจะอยู่ใน เพื่อความสะดวกมีวิดเจ็ตที่เรียกว่าListTileซึ่งมีวิดเจ็ตนำหน้า, ต่อท้าย, ชื่อเรื่อง, วิดเจ็ตคำบรรยาย
  2. มันก็โอเค