سالم20031 نشر 30 يونيو أرسل تقرير نشر 30 يونيو طريقة تصميم هذا الشكل باستخدام ال path & clippers or custom painting حاولت لكن واجه مشكله بالحواف ما ضبطت معي بشكل دائري مثل بالصوره اللي يعرف لا يقصر جزاكم الله خيرا 1 اقتباس
0 Mustafa Suleiman نشر 30 يونيو أرسل تقرير نشر 30 يونيو عليك أولاً إنشاء Path: Path path = Path(); path.moveTo(0, 0); // نقطة البداية path.lineTo(100, 0); // الخط الأفقي path.quadraticBezierTo(120, 20, 100, 40); // المنحنى الرباعي path.lineTo(0, 40); // الخط الأفقي path.quadraticBezierTo(20, 20, 0, 0); // المنحنى الرباعي path.close(); // أغلاق المسار quadraticBezierTo هو لرسم الزوايا المنحنية. ثم إنشاء مقصّ Clipper: class CustomClipper extends CustomClipper<Rect> { @override Path getClip(Size size) { return path; } @override bool shouldReclip(CustomClipper<Rect> oldClipper) { return true; } } بعد ذلك استخدام Clipper مع عنصر Widget: ClipPath( clipper: CustomClipper(), child: Container( width: 100, height: 40, color: Colors.pink, ), ), من خلال تعديل قيم moveTo, lineTo, و quadraticBezierTo تستطيع تغيير أبعاد وموقع الشكل، وتغيير لون Container لتغيير لون الشكل. أو مباشرًة من خلال Custom Painting لإنشاء الشكل المطلوب كالتالي: class RoundedRectangleClipper extends CustomClipper<Path> { @override Path getClip(Size size) { final path = Path(); // تحديد نصف قطر الزوايا const double radius = 30.0; path.moveTo(radius, 0); path.lineTo(size.width - radius, 0); path.quadraticBezierTo(size.width, 0, size.width, radius); path.lineTo(size.width, size.height - radius); path.quadraticBezierTo(size.width, size.height, size.width - radius, size.height); path.lineTo(radius, size.height); path.quadraticBezierTo(0, size.height, 0, size.height - radius); path.lineTo(0, radius); path.quadraticBezierTo(0, 0, radius, 0); path.close(); return path; } @override bool shouldReclip(CustomClipper<Path> oldClipper) => false; } ثم استخدام CustomPainter في Widget: ClipPath( clipper: RoundedRectangleClipper(), child: Container( width: 162.52, height: 240.85, decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.green, Colors.pink], ), ), ), ) تستطيع تعديل قيمة radius في RoundedRectangleClipper للتحكم في نصف قطر الزوايا. اقتباس
0 سالم20031 نشر 30 يونيو الكاتب أرسل تقرير نشر 30 يونيو لكن الشكل هذا مستطيل الشكل المرفق بالصوره غير اقتباس
السؤال
سالم20031
طريقة تصميم هذا الشكل باستخدام ال path & clippers or custom painting
حاولت لكن واجه مشكله بالحواف ما ضبطت معي بشكل دائري مثل بالصوره اللي يعرف لا يقصر جزاكم الله خيرا
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.