ساخت لیست ویو ListView در فلاتر
لیست ویو ListView یکی از کاربردی ترین ویجت ها در برنامه نویسی موبایل می باشد.
از لیست برای نمایش یک سری اطلاعات شبیه به هم استفاده می کنیم.
برای مثال لیست مخاطبان کاربر و در نظر بگیرید, تمام آنها دارای یک سری اطلاعات مشابه به هم هستند پس میتونیم از لیست ویو استفاده کنیم تا این لیست و به کاربر نمایش دهیم.
در این مطلب لیست ویویی که میسازیم بصورت کاملا ابتدایی و ساده هست و در مطالب بعدی با همدیگه ListView های پیچیده تر و کار خواهیم کرد.
خب برای شروع لایه Scafold و به برنامه اضافه کنید و در قسمت body از ویجت ListView استفاده کنید.
به مثال زیر توجه کنید:
ListView(
children: <widget>[
ListTile(
leading: Icon(Icons.web),
title: Text('ّFlutter-learn.ir'),
),
ListTile(
leading: Icon(Icons.photo_album),
title: Text('Google.com'),
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Flutter'),
),
],
)
در اینجا ما یک لیست ویو تعریف کردیم سپس با استفاده از Children رکوردهای خودمون و اضافه کردیم.
هر ردیف لیست ویو ما یک ویجت به اسم ListTile دارد که از یک عنوان و آیکون تشکیل شده است.
میتونید یک زیرعنوان هم قرار دهید با استفاده از دستور subtiltle
هر عنوان ما یک Text هست که میتونید با استفاده از مطالب قبلی استایل Text و عوض کنید.
خروجی کدهای بالای ما به شکل زیر می باشد.
کدهای کامل پروژه ها هم به شکل زیر هست.
runApp(
new MaterialApp(
home: new Scaffold(
appBar: AppBar(
title: Text('ListView'),
backgroundColor: Colors.redAccent,
centerTitle: true,
),
body: ListView(
children: <widget>[
ListTile(
leading: Icon(Icons.web),
title: Text('ّFlutter-learn.ir'),
),
ListTile(
leading: Icon(Icons.photo_album),
title: Text('Google.com'),
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Flutter'),
),
],
)
),
)
);
این نوع لیست ویو سرعت طراحی بالایی دارد اما امکانات کمی برای شخصی سازی کردن دارد.
برای آشنایی با نحوه طراحی لیست ویوهای پیشرفته به مطلب زیر مراجعه کنید.
دیدگاهتان را بنویسید