Flutter Dev نشر 22 مايو 2021 أرسل تقرير نشر 22 مايو 2021 (معدل) السلام عليكم ورحمة الله وبركاته تحيه طيبه للجميع قمت بستعمال PageView لعرض مجموعة من الصور ويوجد موشر Dots لعرض حركة الصور من قبل المستخدم. المشكله ان Dots استطيع وضع قيمته اعتمادنا على رقم انا اقوم بتحديده في بداية الامر من خلال : static const int MAX = 4; ولكن قد يكون ليس لدي هذا العدد او القيمة من الصور في قاعدة البيانات التي تجلب الصور للمستخدم بمعنى سوف يكون Dots فارغ لو لم يحتوي على صور . كيف يمكن التحكم في عدد Dots بحيث لو كنت امتلك ثلاث صور على سبيل المثال يظهر فقط ثلاثل Dots قمت بستعمال الكود التالي لعمل هذا الامر: class BadUserMain extends StatefulWidget { @override State<StatefulWidget> createState() { return new JsonImageListWidget(); } } class JsonImageList extends StatefulWidget { JsonImageListWidget createState() => JsonImageListWidget(); } class JsonImageListWidget extends State { List<UsersData> users = List(); List<UsersData> filteredUsers = List(); int page = 0; static const int MAX = 4; var apiURL; @override void initState() { // TODO: implement initState super.initState(); FetchUserData().then((value) { setState(() { users.addAll(value); filteredUsers = users; }); }); } Future<List<UsersData>> FetchUserData() async { apiURL = 'https://*****************.php'; var response = await http.post(Uri.parse(apiURL)); if (response.statusCode == 200) { final items = json.decode(response.body).cast<Map<String, dynamic>>(); List<UsersData> listOfFruits = items.map<UsersData>((json) { return UsersData.fromJson(json); }).toList(); return listOfFruits; throw Exception('Failed to load data from Server.'); } } @override Widget build(BuildContext context) { return Scaffold( body: SingleChildScrollView( child: Column( children: <Widget>[ Card( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(0)), elevation: 2, margin: EdgeInsets.all(0), child: Container( width: double.infinity, height: 400, child: Stack( children: <Widget>[ PageView.builder( onPageChanged: onPageViewChange, itemCount: filteredUsers.length, itemBuilder: (BuildContext context, int index) { return Container( child: Column( children: <Widget>[ InkWell( child: Image.network( filteredUsers[index]. image.toString(), width: double.infinity, height: 400, fit: BoxFit.cover, ), ), ] ), ); } ), Align( alignment: Alignment.bottomCenter, child: Container( height: 40, decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.black.withOpacity(0.0), Colors.black.withOpacity(0.5)]) ), child: Align( alignment: Alignment.center, child: buildDots(context), ), ), ) ] ), ) ) ] ) ), ); } void onPageViewChange(int _page) { page = _page; setState(() {}); } Widget buildDots(BuildContext context){ Widget widget; List<Widget> dots = []; for(int i=0; i<MAX; i++){ Widget w = Container( margin: EdgeInsets.symmetric(horizontal: 5), height: 8, width: 8, child: CircleAvatar( backgroundColor: page == i ? Colors.blue : Colors.grey[100], ), ); dots.add(w); } widget = Row( mainAxisSize: MainAxisSize.min, children: dots, ); return widget; } } تم التعديل في 22 مايو 2021 بواسطة مروان مروان3 1 اقتباس
1 بلال زيادة نشر 22 مايو 2021 أرسل تقرير نشر 22 مايو 2021 يمكنك تمرير عدد List المستخدمة إلى Widget BuildDots بحيث في شرط التكرار for(int i=0; i<MAX; i++){ .... } يكون مثلا متغير i أصغر من عدد List بهذا الشكل filteredUsers.length فيصبح شرك التكرار بهذا الشكل for(int i=0; i<filteredUsers.length; i++){ .... } يمكنك تجربة ذلك 1 اقتباس
1 بلال زيادة نشر 22 مايو 2021 أرسل تقرير نشر 22 مايو 2021 بتاريخ 1 دقيقة مضت قال مروان مروان3: لقد نجح الامر شكرا لك اخي الكريم هل يمكنك وضع الكود كاملا هنا بعد نجاحه ليستفيد منه الاخرين. 1 اقتباس
0 Flutter Dev نشر 22 مايو 2021 الكاتب أرسل تقرير نشر 22 مايو 2021 بتاريخ 9 دقائق مضت قال بلال زيادة: يمكنك تمرير عدد List المستخدمة إلى Widget BuildDots بحيث في شرط التكرار for(int i=0; i<MAX; i++){ .... } يكون مثلا متغير i أصغر من عدد List بهذا الشكل filteredUsers.length فيصبح شرك التكرار بهذا الشكل for(int i=0; i<filteredUsers.length; i++){ .... } يمكنك تجربة ذلك لقد نجح الامر شكرا لك اخي الكريم 1 اقتباس
0 Flutter Dev نشر 22 مايو 2021 الكاتب أرسل تقرير نشر 22 مايو 2021 (معدل) بتاريخ 5 دقائق مضت قال بلال زيادة: هل يمكنك وضع الكود كاملا هنا بعد نجاحه ليستفيد منه الاخرين. بطبع اخي الكريم الكود بعد التعديل اصبح كالتالي: class BadUserMain extends StatefulWidget { @override State<StatefulWidget> createState() { return new JsonImageListWidget(); } } class JsonImageList extends StatefulWidget { JsonImageListWidget createState() => JsonImageListWidget(); } class JsonImageListWidget extends State { List<UsersData> users = List(); List<UsersData> filteredUsers = List(); int page = 0; var apiURL; @override void initState() { // TODO: implement initState super.initState(); FetchUserData().then((value) { setState(() { users.addAll(value); filteredUsers = users; }); }); } Future<List<UsersData>> FetchUserData() async { apiURL = 'https://*****************.php'; var response = await http.post(Uri.parse(apiURL)); if (response.statusCode == 200) { final items = json.decode(response.body).cast<Map<String, dynamic>>(); List<UsersData> listOfFruits = items.map<UsersData>((json) { return UsersData.fromJson(json); }).toList(); return listOfFruits; throw Exception('Failed to load data from Server.'); } } @override Widget build(BuildContext context) { return Scaffold( body: SingleChildScrollView( child: Column( children: <Widget>[ Card( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(0)), elevation: 2, margin: EdgeInsets.all(0), child: Container( width: double.infinity, height: 400, child: Stack( children: <Widget>[ PageView.builder( onPageChanged: onPageViewChange, itemCount: filteredUsers.length, itemBuilder: (BuildContext context, int index) { return Container( child: Column( children: <Widget>[ InkWell( child: Image.network( filteredUsers[index]. image.toString(), width: double.infinity, height: 400, fit: BoxFit.cover, ), ), ] ), ); } ), Align( alignment: Alignment.bottomCenter, child: Container( height: 40, decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.black.withOpacity(0.0), Colors.black.withOpacity(0.5)]) ), child: Align( alignment: Alignment.center, child: buildDots(context), ), ), ) ] ), ) ) ] ) ), ); } void onPageViewChange(int _page) { page = _page; setState(() {}); } Widget buildDots(BuildContext context){ Widget widget; List<Widget> dots = []; for(int i=0; i<filteredUsers.length; i++){ Widget w = Container( margin: EdgeInsets.symmetric(horizontal: 5), height: 8, width: 8, child: CircleAvatar( backgroundColor: page == i ? Colors.blue : Colors.grey[100], ), ); dots.add(w); } widget = Row( mainAxisSize: MainAxisSize.min, children: dots, ); return widget; } } تم التعديل في 22 مايو 2021 بواسطة مروان مروان3 1 اقتباس
السؤال
Flutter Dev
السلام عليكم ورحمة الله وبركاته
تحيه طيبه للجميع
قمت بستعمال PageView لعرض مجموعة من الصور ويوجد موشر Dots لعرض حركة الصور من قبل المستخدم.
المشكله ان Dots استطيع وضع قيمته اعتمادنا على رقم انا اقوم بتحديده في بداية الامر من خلال :
static const int MAX = 4;
ولكن قد يكون ليس لدي هذا العدد او القيمة من الصور في قاعدة البيانات التي تجلب الصور للمستخدم بمعنى سوف يكون Dots فارغ لو لم يحتوي على صور .
كيف يمكن التحكم في عدد Dots بحيث لو كنت امتلك ثلاث صور على سبيل المثال يظهر فقط ثلاثل Dots
قمت بستعمال الكود التالي لعمل هذا الامر:
4 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.