درک ابزارک های فلاتر: ستون در مقابل ردیف

در Flutter، طراحی چیدمان حول ویجت ها می چرخد. دو مورد از ضروری ترین ویجت های طرح بندی هستند Columnو Row. آنها نحوه قرارگیری ویجت های کودک را به ترتیب به صورت عمودی و افقی کنترل می کنند. بیایید به جزئیات بپردازیم و آنها را در عمل با کد مثال ببینیم.

ویجت ستون

را Columnویجت در Flutter برای تراز کردن ویجت های کودک به صورت عمودی استفاده می شود. شبیه عمودی است LinearLayoutدر اندروید یا عمودی StackPanelدر UWP در اینجا یک مثال ساده آورده شده است:

در این مثال، mainAxisAlignment دارایی تنظیم شده است MainAxisAlignment.center، که کودکان را به صورت عمودی در مرکز قرار می دهد. را crossAxisAlignment تنظیم شده است CrossAxisAlignment.startتراز کردن بچه ها با شروع محور متقاطع (در این مورد به صورت افقی).

ویجت ردیف

برعکس، Rowویجت فرزندان خود را به صورت افقی مرتب می کند. شبیه به افقی است LinearLayoutدر اندروید یا افقی StackPanelدر UWP در اینجا یک مثال است:

اینجا، mainAxisAlignmentتنظیم شده است MainAxisAlignment.spaceEvenly، که کودکان را به طور مساوی در محور افقی با فاصله مساوی توزیع می کند.

ترکیب ستون و ردیف

می توانید لانه سازی کنید Rowو Columnویجت ها برای ایجاد طرح بندی های پیچیده در اینجا یک مثال تودرتو آمده است:

در این طرح تودرتو، یک Rowداخل a قرار می گیرد Column، ترکیبی از تراز افقی و عمودی.

نتیجه

درک Columnو Rowویجت ها برای طراحی چیدمان موثر در فلاتر بسیار مهم هستند. برای ایجاد UI مورد نظر برای برنامه خود، ویژگی ها و nesting را آزمایش کنید.

با من تماس بگیرید
GitHub