/ساخت لیست ویو ListView در فلاتر
برنامه نویس فلاتر

ساخت لیست ویو ListView در فلاتر

لیست ویو ListView یکی از کاربردی ترین ویجت ها در برنامه نویسی موبایل می باشد.

از لیست برای نمایش یک سری اطلاعات شبیه به هم استفاده می کنیم.

برای مثال لیست مخاطبان کاربر و در نظر بگیرید, تمام آنها دارای یک سری اطلاعات مشابه به هم هستند پس میتونیم از لیست ویو استفاده کنیم تا این لیست و به کاربر نمایش دهیم.

در این مطلب لیست ویویی که میسازیم بصورت کاملا ابتدایی و ساده هست و در مطالب بعدی با همدیگه ListView های پیچیده تر و کار خواهیم کرد.

خب برای شروع لایه Scafold و به برنامه اضافه کنید و در قسمت body از ویجت ListView استفاده کنید.

به مثال زیر توجه کنید:


ListView(
          children: [
            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: [
            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'),
            ),
          ],
        )
      ),
    )
  );