0

ListView و ScrollPhysics در فلاتر: نگاهی دقیق

ListView در Flutter لیستی خطی از موارد قابل اسککرول شدن است. ما می توانیم از آن برای ایجاد لیستی از موارد قابل پیمایش یا ایجاد لیستی از آیتم های تکراری استفاده کنیم.

کاوش در انواع ListView

ما با بررسی انواع ListView شروع خواهیم کرد و بعداً به سایر ویژگی ها و اصلاحات دقیق آن خواهیم پرداخت.

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
}

[sourcecode language=”plain”]
// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import ‘package:flutter/material.dart’;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Welcome to Flutter’,
home: Scaffold(
appBar: AppBar(
title: Text(‘Welcome to Flutter’),
),
body: Center(
child: Text(‘Hello World’),
),
),
);
}
}
[/sourcecode]

بیایید به انواع ListView های موجود نگاهی بیندازیم:

  1. ListView
  2. ListView.builder
  3. ListView.separated
  4. ListView.custom

 

بیایید یک به  یک به جستجوی این انواع بپردازیم:

 

ListView

سازنده پیش فرض کلاس ListView است. ListView به سادگی لیستی از فرزندان(children) را گرفته و قابل پیمایش می کند.

قالب کلی کد به شرح زیر است:


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

معمولاً این نوع باید در تعداد کمی از فرزندان استفاده شود زیرا لیست عناصر نامرئی(در پایین تر یا بالاتر برای اسکرول ) در لیست را نیز ایجاد می کند و  ساخت مقدار زیادی از عناصر ممکن است برنامه را ناکارآمد کند.

ListView.builder()

سازنده ()builder  یک لیست تکراری از آیتم ها را می‌سازد. سازنده دو پارامتر اصلی را می‌گیرد: یک itemCount برای تعداد موارد در این فهرست و یک itemBuilder برای ساخت هر یک از موارد فهرست.

قالب کلی کد به شرح زیر است:

 

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

موارد لیست به صورت lazily ساخته می شوند ، به این معنی که فقط تعداد خاصی از آیتم های لیست ساخته می شوند و وقتی کاربر به جلو پیمایش می کند ، موارد قبلی از بین می روند.

 

ترفند شسته و رفته: از آنجا که عناصر با lazily بارگیری می شوند و فقط تعداد لازم عناصر بارگیری می شوند ، ما به عنوان یک پارامتر اجباری واقعاً به آیتم Count احتیاج نداریم و لیست می تواند بی نهایت باشد.


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()

در سازنده () separated  ، لیستی ایجاد می کنیم و می توانیم جدا کننده را بین هر مورد مشخص کنیم.

در اصل ، ما دو لیست بهم پیوسته می سازیم: یکی به عنوان لیست اصلی ، یکی به عنوان لیست جدا کننده.

توجه داشته باشید که تعداد بی نهایت مورد بحث در سازنده قبلی در اینجا قابل استفاده نیست و این سازنده یک آیتمCount را اجرا می کند.

قالب کلی کد به شرح زیر است:


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

این نوع لیست به شما امکان می دهد جدا کننده ها را به صورت پویا تعریف کنید ، انواع مختلفی از جداکننده ها برای انواع مختلف اقلام داشته باشید ، جداکننده ها را در صورت لزوم اضافه یا حذف کنید ، و … .

این پیاده سازی همچنین می تواند برای درج انواع دیگر عناصر (به عنوان مثال تبلیغات) به راحتی و بدون تغییر در لیست اصلی در وسط موارد لیست مورد استفاده قرار گیرد.

 

ListView.custom()

سازنده ()custom همانطور که از نام آن پیداست ، به شما امکان می دهد ListView را با عملکردهای سفارشی برای نحوه ساخت فرزندان لیست ایجاد کنید. پارامتر اصلی مورد نیاز برای این یک SliverChildDelegate است که آیتم ها  را می سازد. انواع SliverChildDelegates شامل:

  1. SliverChildBuilderDelegate

SliverChildListDelegate لیستی مستقیم از فرزندان را می پذیرد در حالی که SliverChildBuiderDelegate یک IndexedWidgetBuilder (تابع builder  ای که ما استفاده می کنیم) را می پذیرد.

سازنده پیش فرض ListView مانند یک ListView.custom با یک SliverChildListDelegate رفتار می کند.

اکنون که ما با انواع ListViews کار خود را تمام کردیم ، بیایید نگاهی به ScrollPhysics بیندازیم.

 

کاوش در انواع ScrollPhysics

برای کنترل نحوه پیمایش ، پارامتر فیزیک را در سازنده ListView تنظیم می کنیم. انواع مختلف فیزیک عبارتند از:

NeverScrollableScrollPhysics

NeverScrollableScrollPhysics لیست را غیرقابل پیمایش می کند. از این کار برای غیرفعال کردن کامل پیمایش ListView  استفاده کنید.

BouncingScrollPhysics

BouncingScrollPhysics با پایان یافتن لیست ، لیست را پس می زند. یک اثر مشابه در iOS استفاده می شود.(برای مثال در اپ ها برای آپدیت شدن پیام ها از این مورد استفاده میتوان کرد.چون بعد از کشیدن لیست بیشتر از حد معمول،پس اتمام کشیدن

توسط کاربر، لیست به انتها برمگیردد.

ClampingScrollPhysics

این فیزیک پیمایشی پیش فرض است که در Android استفاده می شود. لیست در پایان متوقف می شود و بیشتر از لیست را اسکرول نمیکند.

FixedExtentScrollPhysics

این مورد  با لیست های دیگر این لیست کمی متفاوت است به این معنا که فقط با FixedExtendScrollControllers و لیست هایی که از آنها استفاده می کنند کار می کند. به عنوان مثال ما یک ListWheelScrollView را لیست می کنیم که لیستی مانند چرخ ایجاد می کند.FixedExtentScrollPhysics فقط به جای جابجایی بین موارد ، بین آنها پیمایش می شود.

قالب کلی کد به شرح زیر است:


FixedExtentScrollController fixedExtentScrollControl

 

کاوش در انواع ListView
ما با بررسی انواع ListView شروع خواهیم کرد و بعداً به سایر ویژگی ها و اصلاحات دقیق آن خواهیم پرداخت.

بیایید به انواع ListView های موجود نگاهی بیندازیم:

ListView
ListView.builder
ListView.separated
ListView.custom
بیایید یک به  یک به جستجوی این انواع بپردازیم:

 

ListView
سازنده پیش فرض کلاس ListView است. ListView به سادگی لیستی از فرزندان(children) را گرفته و قابل پیمایش می کند.

قالب کلی کد به شرح زیر است:

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

معمولاً این نوع باید در تعداد کمی از فرزندان استفاده شود زیرا لیست عناصر نامرئی(در پایین تر یا بالاتر برای اسکرول ) در لیست را نیز ایجاد می کند و  ساخت مقدار زیادی از عناصر ممکن است برنامه را ناکارآمد کند.

ListView.builder()
سازنده ()builder  یک لیست تکراری از آیتم ها را می‌سازد. سازنده دو پارامتر اصلی را می‌گیرد: یک itemCount برای تعداد موارد در این فهرست و یک itemBuilder برای ساخت هر یک از موارد فهرست.

قالب کلی کد به شرح زیر است:

 

 

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

موارد لیست به صورت lazily ساخته می شوند ، به این معنی که فقط تعداد خاصی از آیتم های لیست ساخته می شوند و وقتی کاربر به جلو پیمایش می کند ، موارد قبلی از بین می روند.

 

 

ترفند شسته و رفته: از آنجا که عناصر با lazily بارگیری می شوند و فقط تعداد لازم عناصر بارگیری می شوند ، ما به عنوان یک پارامتر اجباری واقعاً به آیتم Count احتیاج نداریم و لیست می تواند بی نهایت باشد.

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()
در سازنده () separated  ، لیستی ایجاد می کنیم و می توانیم جدا کننده را بین هر مورد مشخص کنیم.

در اصل ، ما دو لیست بهم پیوسته می سازیم: یکی به عنوان لیست اصلی ، یکی به عنوان لیست جدا کننده.

توجه داشته باشید که تعداد بی نهایت مورد بحث در سازنده قبلی در اینجا قابل استفاده نیست و این سازنده یک آیتمCount را اجرا می کند.

قالب کلی کد به شرح زیر است:

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

این نوع لیست به شما امکان می دهد جدا کننده ها را به صورت پویا تعریف کنید ، انواع مختلفی از جداکننده ها برای انواع مختلف اقلام داشته باشید ، جداکننده ها را در صورت لزوم اضافه یا حذف کنید ، و … .

این پیاده سازی همچنین می تواند برای درج انواع دیگر عناصر (به عنوان مثال تبلیغات) به راحتی و بدون تغییر در لیست اصلی در وسط موارد لیست مورد استفاده قرار گیرد.

 

 

ListView.custom()
سازنده ()custom همانطور که از نام آن پیداست ، به شما امکان می دهد ListView را با عملکردهای سفارشی برای نحوه ساخت فرزندان لیست ایجاد کنید. پارامتر اصلی مورد نیاز برای این یک SliverChildDelegate است که آیتم ها  را می سازد. انواع SliverChildDelegates شامل:

SliverChildListDelegate
SliverChildBuilderDelegate
SliverChildListDelegate لیستی مستقیم از فرزندان را می پذیرد در حالی که SliverChildBuiderDelegate یک IndexedWidgetBuilder (تابع builder  ای که ما استفاده می کنیم) را می پذیرد.

سازنده پیش فرض ListView مانند یک ListView.custom با یک SliverChildListDelegate رفتار می کند.

اکنون که ما با انواع ListViews کار خود را تمام کردیم ، بیایید نگاهی به ScrollPhysics بیندازیم.

 

 

کاوش در انواع ScrollPhysics
برای کنترل نحوه پیمایش ، پارامتر فیزیک را در سازنده ListView تنظیم می کنیم. انواع مختلف فیزیک عبارتند از:

NeverScrollableScrollPhysics
NeverScrollableScrollPhysics لیست را غیرقابل پیمایش می کند. از این کار برای غیرفعال کردن کامل پیمایش ListView  استفاده کنید.

BouncingScrollPhysics
BouncingScrollPhysics با پایان یافتن لیست ، لیست را پس می زند. یک اثر مشابه در iOS استفاده می شود.(برای مثال در اپ ها برای آپدیت شدن پیام ها از این مورد استفاده میتوان کرد.چون بعد از کشیدن لیست بیشتر از حد معمول،پس اتمام کشیدن

توسط کاربر، لیست به انتها برمگیردد.

ClampingScrollPhysics
این فیزیک پیمایشی پیش فرض است که در Android استفاده می شود. لیست در پایان متوقف می شود و بیشتر از لیست را اسکرول نمیکند.

FixedExtentScrollPhysics
این مورد  با لیست های دیگر این لیست کمی متفاوت است به این معنا که فقط با FixedExtendScrollControllers و لیست هایی که از آنها استفاده می کنند کار می کند. به عنوان مثال ما یک ListWheelScrollView را لیست می کنیم که لیستی مانند چرخ ایجاد می کند.FixedExtentScrollPhysics فقط به جای جابجایی بین موارد ، بین آنها پیمایش می شود.

قالب کلی کد به شرح زیر است:

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

چند نکته دیگر برای دانستن
چگونه عناصری که از بین می روند را در لیست زنده نگه داریم؟
فلاتر یک ویدجت () KeepAlive ارائه می دهد که موردی را زنده نگه می دارد. در یک لیست ، عناصر به طور پیش فرض در یک ویدجت AutomaticKeepAlive بسته بندی می شوند.

با تنظیم قسمت addAutomaticKeepAlives روی false ، می توان AutomaticKeepAlives را غیرفعال کرد. در مواردی که نیازی به زنده نگه داشتن عناصر یا برای اجرای سفارشی KeepAlive ، مفید است.

چرا ListView من بین لیست و ویدجت خارجی اش فاصله دارد؟
به طور پیش فرض ، یک ListView دارای padding بین آن و ویجت خارجی است ، برای حذف آن ، padding را روی (0.0)EdgeInsets.all تنظیم کنید .

 

ler =
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,


چند نکته دیگر برای دانستن

چگونه عناصری که از بین می روند را در لیست زنده نگه داریم؟

فلاتر یک ویدجت () KeepAlive ارائه می دهد که موردی را زنده نگه می دارد. در یک لیست ، عناصر به طور پیش فرض در یک ویدجت AutomaticKeepAlive بسته بندی می شوند.

با تنظیم قسمت addAutomaticKeepAlives روی false ، می توان AutomaticKeepAlives را غیرفعال کرد. در مواردی که نیازی به زنده نگه داشتن عناصر یا برای اجرای سفارشی KeepAlive ، مفید است.

چرا ListView من بین لیست و ویدجت خارجی اش فاصله دارد؟

به طور پیش فرض ، یک ListView دارای padding بین آن و ویجت خارجی است ، برای حذف آن ، padding را روی (0.0)EdgeInsets.all تنظیم کنید .

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *