ListView và ScrollPhysical trong Flutter

ListView trong Flutter là một danh sách tuyến tính của các mục có thể cuộn. Chúng ta có thể sử dụng nó để tạo danh sách các mục có thể cuộn hoặc tạo danh sách các mục lặp lại.

Khám phá các loại ListView

Chúng ta sẽ bắt đầu với việc xem xét các loại ListView và sau đó xem xét các tính năng khác:
Hãy cùng xem các loại ListView có:

ListView
ListView.builder
ListView.separated
ListView.custom

Hãy cùng nhau khám phá các loại này nhé:

ListView()

Cú pháp:

ListView(
  children: [
    ItemOne(),
    ItemTwo(),
    ItemThree(),
  ],
),

Thông thường, điều này nên được sử dụng với một số lượng nhỏ child vì ListView cũng sẽ xây dựng các phần tử vô hình trong danh sách và một số lượng lớn các phần tử có thể khiến kết quả này không hiệu quả.

ListView.builder()

Hàm tạo của trình builder() xây dựng một danh sách lặp lại các mục. Hàm tạo có hai tham số chính: Một itemCount cho số lượng mục trong danh sách và itemBuilder để xây dựng từng mục danh sách.

Cú pháp:

ListView.builder(
  itemCount: itemCount,
  itemBuilder: (context, position) {
    return listItem();
  },
),

Các mục danh sách là constructed lazily, có nghĩa là chỉ có một số mục cụ thể của danh sách được xây dựng và khi người dùng cuộn lên trước, các mục trước đó sẽ bị hủy.
Vì các phần tử được tải một cách lazily và chỉ có số lượng phần tử cần thiết được tải, nên thực sự cần một itemCount như một tham số bắt buộc và danh sách có thể là vô hạn.

ListView.builder(
  itemBuilder: (context, position) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(position.toString(), style: TextStyle(fontSize: 22.0),),
      ),
    );
  },
),

ListView.separated()

Trong hàm tạo separated(), chúng tôi tạo một danh sách và chúng tôi có thể chỉ định dấu phân cách giữa mỗi mục.

Về bản chất, chúng tôi xây dựng hai danh sách đan xen: một là danh sách chính, một là danh sách phân cách.

Lưu ý rằng số lượng vô hạn được thảo luận ở trên không thể được sử dụng ở đây và hàm tạo này thực thi một itemCount.
Cú pháp:

ListView.separated(
      itemBuilder: (context, position) {
        return ListItem();
      },
      separatorBuilder: (context, position) {
        return SeparatorItem();
      },
      itemCount: itemCount,
),

Loại danh sách này cho phép bạn xác định động các dấu phân cách, có các loại dấu phân cách khác nhau cho các loại mục khác nhau, thêm hoặc xóa dấu phân cách khi cần, v.v.
Việc triển khai này cũng có thể được sử dụng để chèn các loại yếu tố khác (ví dụ quảng cáo) một cách dễ dàng và không có bất kỳ sửa đổi nào cho danh sách chính ở giữa các mục danh sách.

Độ dài danh sách phân tách nhỏ hơn 1 so với danh sách mục vì dấu phân cách không tồn tại sau phần tử cuối cùng.

ListView.custom()

Hàm tạo custom() như tên gọi của nó gợi ý, cho phép bạn xây dựng ListViews với chức năng tùy chỉnh cho cách xây dựng phần tử con của danh sách. Tham số chính cần thiết cho điều này là SliverChildDelegate để xây dựng các mục. Các loại SliverChildDelegates là:

SliverChildListDelegate
SliverChildBuilderDelegate

SliverChildListDelegate chấp nhận danh sách child trực tiếp trong khi SliverChildBuiderDelegate chấp nhận IndexedWidgetBuilder
Bạn có thể sử dụng hoặc phân lớp chúng để xây dựng các đại biểu của riêng bạn.

ListView.builder về cơ bản là một ListView.custom với SliverChildBuilderDelegate.
Hàm tạo mặc định ListView hoạt động giống như ListView.custom với SliverChildListDelegate.

Các thuộc tính kiểm soát chế độ cuộn trong ListView

Để kiểm soát cách cuộn diễn ra, chúng tôi đặt tham số vật lý trong hàm tạo ListView. Các loại vật lý khác nhau là:
NeverScrollableScrollPhysics
NeverScrollableScrollPhysics hiển thị danh sách không thể cuộn. Sử dụng công cụ này để vô hiệu hóa cuộn ListView hoàn toàn.
BouncingScrollPhysics
BouncingScrollPhysics trả lại danh sách khi danh sách kết thúc. Một hiệu ứng tương tự được sử dụng trên iOS.

ClampingScrollPhysics

Đây là hiệu ứng cuộn mặc định được sử dụng giống Android. Danh sách dừng lại ở cuối và cho một hiệu ứng chỉ ra nó.

FixedExtentScrollPhysics

Điều này hơi khác so với những cái khác trong danh sách này theo nghĩa là nó chỉ hoạt động với FixedExtendScrollControllers và danh sách sử dụng chúng. Ví dụ, chúng tôi sẽ lấy ListWheelScrollView để tạo danh sách giống như bánh xe.
FixedExtentScrollPhysics chỉ cuộn đến các mục thay vì bất kỳ phần bù nào ở giữa.

Mã code cho ví dụ này cực đơn giản:

FixedExtentScrollController fixedExtentScrollController =
    new FixedExtentScrollController();
ListWheelScrollView(
  controller: fixedExtentScrollController,
  physics: FixedExtentScrollPhysics(),
  children: monthsOfTheYear.map((month) {
    return Card(
        child: Row(
      children: [
        Expanded(
            child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            month,
            style: TextStyle(fontSize: 18.0),
          ),
        )),
      ],
    ));
  }).toList(),
  itemExtent: 60.0,
),

Một vài điều cần biết

Làm thế nào để giữ các yếu tố không bị huỷ trong một danh sách?
Flutter cung cấp tiện ích KeepAlive () để giữ một phần tử tồn tại nếu không sẽ bị phá hủy. Trong danh sách, các phần tử được gói theo mặc định trong tiện ích AutomaticKeepAlive.

AutomaticKeepAlives có thể bị vô hiệu hóa bằng cách đặt trường addAutomaticKeepAlives thành false.
Theo mặc định, ListView có phần padding giữa nó và widget bên ngoài, để xóa nó, đặt padding thành EdgeInsets.all (0.0).

Cảm ơn các bạn đã đón đọc!

Bài viết được tham khảo tại đây

ListView và ScrollPhysical trong Flutter

Bình luận