معیارهای خط (Line Metrics) در فلاتر – به زبان ساده

۲۳۵ بازدید

آخرین به‌روزرسانی: ۴ مهر ۱۴۰۲

زمان مطالعه: ۴ دقیقه

دانلود PDF مقاله

در گذشته بسیاری از ابزارهای سطح پایین برای کار با متن در فلاتر در لایه نیتیو از دید توسعه‌دهنده پنهان بودند. اما در نسخه‌های اخیر بسیاری از موارد مرتبط با Line Metrics در Dart افشا شده‌اند. در این مقاله به بررسی مفهوم Line Metrics در فلاتر می‌پردازیم.

فهرست مطالب این نوشته

Line Metrics چیست؟

چگونه Line Metrics را به دست آوریم؟

معیارهای خط چه اهمیتی دارند؟

محدودیت‌های LineMetrics

کد تکمیلی

Line Metrics چیست؟

در فلاتر یک کلاس جدید به نام «معیارهای خط» (Line Metrics) (+) وجود دارد که اطلاعاتی در مورد خطوط منفرد یک پاراگراف که لی‌آوت‌بندی شده است ارائه می‌کند.

فیلم آموزش پروژه محور فلاتر – طراحی اپلیکیشن موبایل با Flutter – مقدماتی در فرادرس

کلیک کنید

این کلاس با حذف سازنده و توضیحات به صورت زیر است:

در کلاس فوق:

hard break: تعیین می‌کند آیا خط با یک کاراکتر خط جدید مانند ‎\n پایان یافته یا نه.
Ascent: فاصله از خط مبنا تا بالای خط را تعیین می‌کند.
Descent: فاصله از خط مبنا تا انتهای خط را تعیین می‌کند.
unscaled ascent: همان accent با نادیده گرفتن مضرب TextStyle.height است.
height: فاصله از انتها تا بالای خط را تعیین می‌کند.
width: فاصله از سمت چپ تا سمت راست خط را تعیین می‌کند.
Baseline: خط مبنا یا خطی که متن روی آن قرار می‌گیرد، از بالای پاراگراف و نه بالای خط اندازه‌گیری می‌شود.
line number: عدد خط جاری در پاراگراف که از اندیس صفر آغاز می‌شود.

چگونه Line Metrics را به دست آوریم؟

فهرستی از معیارهای خط را می‌توانید با استفاده از کلاس TextPainter به دست آورید:

همچنین می‌توانید از کلاس Paragraph استفاده کنید. در واقع کلاس TextPainter نیز در پس‌زمینه این را فرا می‌خواند:

بررسی یک مثال

فرض کنید رشته‌ای مانند زیر داریم:

My text line.\nThis line wraps to the next.\nAnother line.

همچنین تصور کنید محدودیت عرض لی‌آوت را نیز به قدر کافی کوچک تعیین کرده‌ایم تا یک soft-wrap روی طولانی‌ترین خط اعمال شود و بدین ترتیب نتیجه زیر حاصل شود:

Line Metrics در فلاتر

باکس‌های قرمز و خطوط آبی بر اساس مقادیر LineMetrics ترسیم شده‌اند. خطوط آبی، خط مبنا (Baseline) هستند. داده‌های خام هر یک از چهار خط به صورت زیر است:

hardBreak = true
ascent = 27.83203125
descent = 7.32421875
unscaledAscent = 27.83203125
height = 35.0
width = 160.35546875
left = 0.0
baseline = 27.67578125
lineNumber = 0
hardBreak = false
ascent = 27.83203125
descent = 7.32421875
unscaledAscent = 27.83203125
height = 35.0
width = 284.78125
left = 0.0
baseline = 62.67578125
lineNumber = 1
hardBreak = true
ascent = 27.83203125
descent = 7.32421875
unscaledAscent = 27.83203125
height = 35.0
width = 64.78515625
left = 0.0
baseline = 97.67578125
lineNumber = 2
hardBreak = true
ascent = 27.83203125
descent = 7.32421875
unscaledAscent = 27.83203125
height = 35.0
width = 167.4921875
left = 0.0
baseline = 132.67578125
lineNumber = 3

معیارهای خط چه اهمیتی دارند؟

ابتدا باید اشاره کنیم که کلاس LineMetrics همه داده‌های معیار را برای هر خط، در یک جا گردآوری کرده است. محاسبه این موارد در گذشته بسیار دشوار بود. دوم این که داشتن یک فهرست از معیارهای خط موجب شده که یافتن تعداد خطوط بسیار آسان شود:

در گذشته تنها گزینه ما دریافت فهرستی از TextBoxes بود، اما زمانی که متن‌های دوطرفه وجود داشته باشند، اتفاقات پیچیده‌ای رخ می‌داد. در این حالت امکان محاسبه تعداد باکس‌ها وجود نداشت، زیرا باکس‌ها به‌صورت زیر ظاهر می‌شدند:

Line Metrics در فلاتر اما زمانی که از کلاس LineMetrics استفاده کنیم نتیجه زیر به دست می‌آید:

Line Metrics در فلاتر

محدودیت‌های LineMetrics

استفاده از کلاس LineMetrics قطعاً برای کسانی که می‌خواهند کارهای سطح پایینی در مورد رندر کردن متن انجام دهند، مسیر مناسبی محسوب می‌شود. با این حل باید به نکات زیر توجه داشته باشید:

LineMetrics همچنان تصور می‌کند که متن دارای لی‌آوت افقی استاندارد LTR یا RTL در یک باکس مستطیلی است. اگر از لی‌آوت های سفارشی استفاده می‌کنید که هر کلمه به صورت یک پاراگراف جداگانه رندر می‌شود، کلاس LineMetrics نمی‌تواند کمک چندانی به شما کمک کند.
در کلاس LineMetrics دریافت متن واقعی هر خط کار دشواری است، گرچه استفاده از آن به چنین منظوری نیز چندان متداول نیست. در این موارد باید از ترکیبی از معیارها و فراخوانی TextPainter.getPositionForOffset استفاده کنید.

البته موارد فوق مشکلات بزرگی محسوب نمی‌شوند و در حالت کلی استفاده از این کلاس بسیار مفید است.

تیم فلاتر از تمایل توسعه‌دهندگان برای داشتن ابزاری مانند یک line breaker و امکان اندازه‌گیری و رسم متن به شیوه‌ای کارآمد آگاه هستند. با این حال در این موارد باید ابتدا بحث و بررسی بیشتری صورت بگیرد.

کد تکمیلی

اگر می‌خواهید با کلاس LineMetrics بیشتر کار کنید، می‌توانید کد زیر را در یک پروژه جدید فلاتر کپی کنید. توجه داشته باشید که باید از نسخه‌ای از فلاتر استفاده کنید که شامل LineMetrics باشد.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

بر اساس رای ۰ نفر

آیا این مطلب برای شما مفید بود؟

اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.

ثبت نظر

منابع:

swlh

میثم لطفی (+)

«میثم لطفی» در رشته‌های ریاضیات کاربردی و مهندسی کامپیوتر به تحصیل پرداخته و شیفته فناوری است. وی در حال حاضر علاوه بر پیگیری علاقه‌مندی‌هایش در رشته‌های برنامه‌نویسی، کپی‌رایتینگ و محتوای چندرسانه‌ای، در زمینه نگارش مقالاتی با محوریت نرم‌افزار با مجله فرادرس همکاری دارد.