Flutter هو إطار عمل قوي يسمح للمطورين بتصميم واجهات المستخدم بشكل سهل وفعال، والذي يتضمن العديد من العناصر (widgets) المختلفة التي تستخدم في بناء واجهات المستخدم. ومن بين هذه العناصر الهامة في Flutter هو عنصر PageView الذي يسمح للمطورين بإنشاء عروض الشرائح (sliders) وعرض صفحات متعددة في نفس الوقت.
يأتي عنصر PageView في Flutter مع عدد من الخصائص التي يمكن استخدامها لتحديد سلوكه ومظهره، وفي هذه المقالة سنقوم بشرح كل خاصية بالتفصيل.
استخدام عنصر PageView
يتم استخدام عنصر PageView في Flutter لعرض مجموعة من الصفحات بشكل متتابع، مما يسمح للمستخدمين بالتنقل بين الصفحات باستخدام الانتقال الأفقي أو الرأسي.
PageView(
children: <Widget>[
Container(
color: Colors.red,
),
Container(
color: Colors.green,
),
Container(
color: Colors.blue,
),
],
)
في هذا المثال، يتم تحديد عنصر PageView لعرض ثلاث صفحات مختلفة، كل منها يحتوي على عنصر Container بلون مختلف.
“اقرأ أيضاً: شرح استخدام ويدجت Tooltip في فلاتر“
خصائص عنصر PageView
1. children
يتم استخدام هذه الخاصية لتحديد مجموعة من العناصر التي يجب عرضها داخل عنصر PageView.
PageView(
children: <Widget>[
Container(
color: Colors.red,
),
Container(
color: Colors.green,
),
Container(
color: Colors.blue,
),
],
)
في هذا المثال، يتم تحديد ثلاثة عناصر (Containers) باستخدام خاصية children.
2. controller
يتم استخدام هذه الخاصية لتحديد عنصر PageController الذي يستخدم للتحكم في صفحات عنصر PageView.
final PageController controller = PageController(
initialPage: 0,
);
PageView(
controller: controller,
children: <Widget>[
Container(
color: Colors.red,
),
Container(
color: Colors.green,
),
Container(
color: Colors.blue,
),
],
)
في هذا المثال، يتم تحديد عنصر PageController كمتحكم لعنصر PageView باستخدام خاصية controller.
3. scrollDirection
يتم استخدام هذه الخاصية لتحديد اتجاه التمرير داخل عنصر PageView، ويمكن تحديد الاتجاه الأفقي أو الرأسي.
PageView(
scrollDirection: Axis.vertical,
children: <Widget>[
Container(
color: Colors.red,
),
Container(
color: Colors.green,
),
Container(
color: Colors.blue,
),
],
)
في هذا المثال، يتم تحديد اتجاه التمرير داخل عنصر PageView على أن يكون رأسيًا باستخدام خاصية scrollDirection.
4. reverse
يتم استخدام هذه الخاصية لتحديد ما إذا كانت الصفحات داخل عنصر PageView يجب عرضها بترتيب عكسي (من الأخير للأول) أم لا.
PageView(
reverse: true,
children: <Widget>[
Container(
color: Colors.red,
),
Container(
color: Colors.green,
),
Container(
color: Colors.blue,
),
],
)
في هذا المثال، يتم تحديد خاصية reverse على أن تكون صفحات عنصر PageView معروضة بالترتيب العكسي.
“اقرأ أيضاً: شرح استخدام ويدجت SafeArea في فلاتر“
5. pageSnapping
يتم استخدام هذه الخاصية لتحديد ما إذا كانت الصفحات داخل عنصر PageView يجب محاذاتها بشكل تلقائي.
PageView(
pageSnapping: false,
children: <Widget>[
Container(
color: Colors.red,
),
Container(
color: Colors.green,
),
Container(
color: Colors.blue,
),
],
)
في هذا المثال، يتم تحديد خاصية pageSnapping على أن تكون الصفحات داخل عنصر PageView غير محاذاة بشكل تلقائي.
6. onPageChanged
يتم استخدام هذه الخاصية لتحديد دالة تستدعى عند تغيير الصفحة الحالية داخل عنصر PageView.
PageView(
onPageChanged: (int index) {
print('Page changed to index $index');
},
children: <Widget>[
Container(
color: Colors.red,
),
Container(
color: Colors.green,
),
Container(
color: Colors.blue,
),
],
)
في هذا المثال، يتم تحديد دالة أونبتشانجد عند تغيير الصفحة الحالية داخل عنصر PageView.
مثال على استخدام PageView في فلاتر
هذا مثال كامل يستخدم عنصر PageView في Flutter لعرض تفاصيل المنتجات في عروض الشرائح (sliders):
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Page View Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyPageView(),
);
}
}
class MyPageView extends StatefulWidget {
@override
_MyPageViewState createState() => _MyPageViewState();
}
class _MyPageViewState extends State<MyPageView> {
final List<String> _imageUrls = [
'https://picsum.photos/id/1018/2500/1667',
'https://picsum.photos/id/1019/2500/1667',
'https://picsum.photos/id/1020/2500/1667',
];
int _currentPageIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('My Page View'),
),
body: Column(
children: [
Expanded(
child: PageView.builder(
onPageChanged: (int index) {
setState(() {
_currentPageIndex = index;
});
},
itemCount: _imageUrls.length,
itemBuilder: (BuildContext context, int index) {
return Image.network(_imageUrls[index], fit: BoxFit.cover);
},
),
),
const SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: _buildPageIndicator(),
),
],
),
);
}
List<Widget> _buildPageIndicator() {
List<Widget> indicators = [];
for (int i = 0; i < _imageUrls.length; i++) {
indicators.add(
Container(
width: 8,
height: 8,
margin: const EdgeInsets.symmetric(horizontal: 4),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: _currentPageIndex == i ? Colors.blue : Colors.grey,
),
),
);
}
return indicators;
}
}
في هذا التطبيق، يتم عرض قائمة من الصفحات باستخدام عنصر PageView، ويتم تحميل الصور من الإنترنت باستخدام شبكة الإنترنت. يتم استخدام خاصية onPageChanged لتحديد الصفحة الحالية في العرض، ويتم استخدام عنصر Image لعرض كل صفحة في العرض. يتم استخدام عنصر Row لعرض المؤشرات التي تشير إلى الصفحة الحالية، ويتم تحديث حالة المؤشرات باستخدام دالة _buildPageIndicator.
“اقرأ أيضاً: شرح استخدام ويدجت TextField في فلاتر“
عنصر PageView هو عنصر مهم جدًا في Flutter يسمح للمطورين بإنشاء عروض الشرائح وعرض صفحات متعددة بسهولة. ويتميز هذا العنصر بالعديد من الخصائص المفيدة التي يمكن استخدامها لتحديد سلوكه ومظهره. ومن خلال تحديد الخصائص المناسبة، يمكن للمطورين إنشاء واجهات المستخدم المتميزة التي تلبي احتياجات المستخدمين الفردية.
