آشنایی با لیست‌ و گرید در فلاتر — راهنمای مقدماتی

در این سری مقالات مجله فرادرس روی موضوع توسعه اپلیکیشن‌های چند پلتفرمی با استفاده از فریمورک فلاتر متمرکز خواهیم شد. این مقالات برای همه افراد از مبتدی تا با تجربه مناسب هستند؛ مقالات در شروع با توضیحات ساده و کلی آغاز می‌شوند و در ادامه به نوبت روی هر یک از موضوعات متمرکز خواهند و آن‌ها را به تفصیل مورد بررسی قرار خواهند داد. در این بخش با مفاهیم لیست‌ و گرید در فلاتر آشنا خواهیم شد.

چنان که می‌دانید فلاتر به طور کلی به کار با ویجت‌ها مربوط است. کار با یک لیست یا RecyclerView در اندروید به معنی نوشتن یک آیتم لیست به عنوان یک «آداپتر» (Adapter)‌ است. سپس آن آداپتر در فایل لی‌آوت به یک «نما» (View) الصاق می‌کنیم. این فرایند بسیار زمان‌بر است و منجر به کند شدن فرایند توسعه می‌شود. فلاتر با حذف کردن اغلب بخش و آیتم لیست مجزا و الصاق آداپترها به نماها نیز ضرورتی ندارند.

مقدمه‌ای بر ListView در فلاتر

یک لیست در فلاتر با استفاده از ویجت ListView ساخته می‌شود. به طور کلی دو نوع لیست وجود دارند:

1. کاربر همه آیتم‌ها را درون لیست تعریف می‌کند (تقریباً معادل ScrollView در اندروید است).
2. کاربر یک آیتم را تعریف می‌کند که در سراسر لیست تکرار می‌شود (معادل RecyclerView در اندروید).

فیلم آموزش پروژه محور فلاتر – طراحی اپلیکیشن موبایل با Flutter – مقدماتی در فرادرس

کلیک کنید

لیست‌های نوع اول

نخستین نوع لیست صرفاً یک کلکسیون اسکرول‌پذیر از آیتم‌ها و چیزی بیش از یک لیست واقعی است. در ادامه مثالی برای استفاده از RecyclerView می‌بینید:

1ListView(
2  children: <Widget>[
3    Text("Element 1"),
4    Text("Element 2")
5  ],
6),

از آنجا که کاربر در این نوع لیست، تک‌تک آیتم‌ها را به صورت مستقل از هم تعریف می‌کند، بیشتر شبیه ScrollView در اندروید رفتار می‌کند تا یک ListView یا RecyclerView. این نوع از لیست در این مقاله صرفاً برای تکمیل بودن توضیحات ارائه شده است و تمرکز ما بیشتر روی نوع دوم از لیست‌ها خواهد بود که در ادامه مورد بررسی قرار می‌دهیم.

لیست‌های نوع دوم

نوع دوم لیست‌ها به لیستی گفته می‌شود که بلوک‌های تکراری با داده‌های متفاوت در هر بلوک دارد. این حالت معادل یک RecyclerView است، اما ساختن آن بسیار آسان‌تر است. برای این که یک لیست را به این روش بسازیم، باید از سازنده ()ListView.builder استفاده کنیم. به مثال زیر در مورد یک ListView که شامل فهرستی از نام‌های نسخه‌ای اندروید است توجه کنید:

1ListView.builder(
2      itemBuilder: (context, position) {
3        return Card(
4          child: Text(androidVersionNames[position]),
5        );
6      },
7      itemCount: androidVersionNames.length,
8)

لیست androidVersionNames یک فهرست از همه نام‌های نسخه‌های اندروید را نمایش می‌دهد.

شکل (نه چندان زیبا) فوق، نمایی از کارت‌ها نمایش ‌می‌دهد که نام نسخه‌های مختلف اندروید روی آن‌ها نمایش یافته است.

درون سازنده دو مشخصه به صورت itemBuilder و itemCount وجود دارد:

• itemCount – کاملاً سرراست است و تعداد آیتم‌های تکرارشونده را که قرار است در لیست نمایش یابد، دریافت می‌کند.
• itemBuilder – جایی است که خود آیتم که قرار است نمایش یابد بازگشت می‌یابد. در اینجا یک کارت ایجاد می‌کنیم که یک ویجت متنی ساده درون خود دارد. Item builder یک تابع لامبدا می‌گیرد که پارامترهای context و position را در خود دارد. Position مشخص می‌کند که در کدام اندیس لیست قرار داریم.

به طور خلاصه، زمانی که یک لیست ایجاد می‌کنیم، باید دو چیز را مشخص سازیم: یکم چند عدد آیتم در لیست وجود دارد، دوم هر آیتم چه ظاهری دارد و چه داده‌هایی در خود جای می‌دهد.

توسعه‌دهندگان اندروید می‌دانند که این دقیقاً معادل RecyclerView است. itemCount اقدام به ساخت ViewHolder می‌کند و داده‌ها را با استفاده از اندیس به آن وصل می‌کند. به این ترتیب نقش فایل لی‌آوت ViewHolder و تابع اتصال آداپتر RecyclerView تکمیل می‌شود. از آنجا که هیچ فایل لی‌آوت مجزایی وجود ندارد، نیازی به وهله‌سازی از LayoutManager و یا آداپتر نیز وجود نخواهد داشت.

این حالت در مقایسه با روش‌های قدیمی‌تر ایجاد لیست، بسیار هوشمندانه‌تر است.

ایجاد گرید در فلاتر

«گرید» (Grid) تا حدود زیادی مشابه لیست است. تنها تفاوت در این است که به جای ListView.builder از ویجت GridView.builder استفاده می‌کنیم. به مثال زیر در مورد GridView.builder توجه کنید:

1GridView.builder(
2    itemBuilder: (context, position) {
3      return Card(
4        child: Text(androidVersionNames[position]),
5      );
6    },
7    itemCount: androidVersionNames.length,
8    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),    
9)

در یک گرید، تنها تفاوت این است که چندین ستون وجود دارند. از این رو یک GridView یک gridDelegate نیز می‌گیرد که به تعیین تعداد ستون‌ها کمک می‌کند.

crossAxisCount درون gridDelegate تعداد ستون‌ها را نمایش می‌دهد. این عدد می‌تواند بر اساس جهت‌گیری نیز تغییر یابد.

نکته: می‌توانید چندین نوع آیتم در یک لیست یا گرید بر اساس اندیس داشته باشید. انجام این کار در فلاتر آسان‌تر است، زیرا همانند اندروید نیتیو روش‌های مختلفی برای ایجاد و اتصال داده‌ها ندارد. گزینه «یک نوع آیتم» که قبلاً معرفی کردیم، صرفاً به منظور ساده‌سازی کار بوده است.

مثال پیشرفته‌تر

برای درک یک مثال از دنیای واقعی، یک دمو با ظاهر بهتر برای یک اپلیکیشن ایمیل معرفی می‌کنیم:

1ListView.builder(
2  itemBuilder: (context, position) {
3    return Column(
4      children: <Widget>[
5        Row(
6          mainAxisAlignment: MainAxisAlignment.spaceBetween,
7          children: <Widget>[
8            Column(
9              crossAxisAlignment: CrossAxisAlignment.start,
10              children: <Widget>[
11                Padding(
12                  padding:
13                      const EdgeInsets.fromLTRB(12.0, 12.0, 12.0, 6.0),
14                  child: Text(
15                    sendersList[position],
16                    style: TextStyle(
17                        fontSize: 22.0, fontWeight: FontWeight.bold),
18                  ),
19                ),
20                Padding(
21                  padding:
22                      const EdgeInsets.fromLTRB(12.0, 6.0, 12.0, 12.0),
23                  child: Text(
24                    subjectList[position],
25                    style: TextStyle(fontSize: 18.0),
26                  ),
27                ),
28              ],
29            ),
30            Padding(
31              padding: const EdgeInsets.all(8.0),
32              child: Column(
33                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
34                children: <Widget>[
35                  Text(
36                    "5m",
37                    style: TextStyle(color: Colors.grey),
38                  ),
39                  Padding(
40                    padding: const EdgeInsets.all(8.0),
41                    child: Icon(
42                      Icons.star_border,
43                      size: 35.0,
44                      color: Colors.grey,
45                    ),
46                  ),
47                ],
48              ),
49            ),
50          ],
51        ),
52        Divider(
53          height: 2.0,
54          color: Colors.grey,
55        )
56      ],
57    );
58  },
59  itemCount: sendersList.length,
60),

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

سخن پایانی

ListView در فلاتر بسیار بیشتر و فراتر از آن چیزی است که فرایند توسعه نیتیو عرضه می‌کند و موجب صرفه‌جویی زمانی زیادی در هنگام توسعه می‌شود و امکان سفارشی‌سازی بسیار زیادی دارد. برای بررسی اپلیکیشن‌های بیشتری که از سوی تیم فلاتر تهیه شده‌اند، می‌توانید به این صفحه (+) ‌مراجعه کنید. برای مطالعه بخش بعدی رویلینک زیر کلیک کنید:

• آموزش ListView و ScrollPhysics در فلاتر (Flutter) — بخش دوم

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌‌های برنامه‌‌نویسی اندروید
• مجموعه آموزش‌‌های برنامه‌‌نویسی
• آموزش فریم ورک Google Flutter برای طراحی اپلیکیشن های موبایل
• گوگل فلاتر (Flutter) از صفر تا صد — ساخت اپلیکیشن به کمک ویجت
• ساخت اپلیکیشن قطب نما با فلاتر — از صفر تا صد

==