عدسة تكبير للصورة في Flutter باستخدام RawMagnifier

إنشاء عدسة تكبير في Flutter باستخدام RawMagnifier وتحديد موقعها محليًا وقص محتواها، مع فصل العدسة عن تكبير الصورة كاملة.

RawMagnifier يعرض جزءًا مكبرًا من المحتوى المرسوم تحته، وتتحكم size وmagnificationScale وfocalPointOffset في العينة. ضعها في Stack فوق صورة محدودة المساحة، ولا تستعمل إحداثيات الشاشة مباشرة كقيم Positioned. حوّل موضع المؤشر إلى فضاء المكون ثم امنع العدسة من الخروج عن حدوده عند الحواف.

اعرض العدسة أثناء السحب أو الضغط وفق سياسة واضحة، وأخفها عند الإلغاء وانتهاء المؤشر. لا تجعلها تمتص كل الإيماءات إذا كان المستخدم يحتاج تفاعلًا مع الصورة. لمن يحتاج تكبيرًا دائمًا مع تحريك الصورة كاملة، InteractiveViewer أنسب غالبًا. اختبر مؤشر الفأرة واللمس وصورة لم تكتمل وحواف العنصر والاتجاهين.

الموضع الذي تضع فيه إطار العدسة ليس بالضرورة مركز البكسلات التي تريد تكبيرها، لذلك جرب focalPointOffset مع العلامة التي تحت المؤشر وتأكد أن العينة تتبعها عند السحب. إذا كان المكون داخل صفحة تمرير فاستعمل الإحداثيات المحلية المناسبة بعد أي تحويل، لا globalPosition مباشرة. اختبر قرب الزوايا حيث تضطر العدسة إلى البقاء داخل الحدود: قد يحتاج مركز العينة تعويضًا مستقلًا عن مكان الإطار. أبق مثالًا صغيرًا بعلامات مرئية قبل استخدام صورة عالية الدقة، ثم أضف صورة ذات حالة فشل وحجم معلوم كي تميز خطأ القياس عن تأخر الشبكة.

وفّر زر إعادة ضبط أو إخفاء للعدسة إذا ظلت ظاهرة في نمط تفاعل دائم، واختبر أن المكون لا يمنع تمرير الصفحة عندما لا تكون العدسة نشطة.

اقرأ التعليقات ومتطلبات الإعداد قبل النقل إلى مشروعك. أمثلة الواجهات ذات main مستقلة، أما العقود والمقاطع الأصلية وملفات الإعداد فموضح نطاقها داخل المثال.

import 'package:flutter/material.dart';
void main() => runApp(const MaterialApp(home: DemoPage()));
class DemoPage extends StatefulWidget {
 const DemoPage({super.key});
 @override
 State<DemoPage> createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
Offset? _point;

 @override
 Widget build(BuildContext context) => Scaffold(
 appBar: AppBar(title: const Text('Flutter lesson')),
 body: LayoutBuilder(builder:(context,c)=>GestureDetector(behavior:HitTestBehavior.opaque,onPanStart:(d)=>setState(()=>_point=d.localPosition),onPanUpdate:(d)=>setState(()=>_point=d.localPosition), onPanEnd:(_)=>setState(()=>_point=null), onPanCancel:()=>setState(()=>_point=null), child: Stack(fit:StackFit.expand,children:[const Center(child:FlutterLogo(size:180)),if(_point!=null) Positioned(left:(_point!.dx-50).clamp(0.0,(c.maxWidth-100).clamp(0.0,double.infinity)).toDouble(), top:(_point!.dy-50).clamp(0.0,(c.maxHeight-100).clamp(0.0,double.infinity)).toDouble(),child:const IgnorePointer(child:RawMagnifier(decoration:MagnifierDecoration(shape:CircleBorder(side:BorderSide(color:Colors.teal,width:2))),size:Size(100,100),magnificationScale:2)))]))));
}

راجع التوثيق الخاص بهذا الموضوع وطابق إعداداته مع إصدار أدوات مشروعك. اختبر السلوك المستهدف وحالة الفشل قبل إدماج المثال في تطبيق منشور.