লেআউট ইঞ্জিন — কনস্ট্রেইন্ট ও ফ্লেক্সবক্স-স্টাইল সিস্টেম

১ · লেআউট ইঞ্জিন কী কাজ করে

উইজেট ট্রি (L20) শুধু গঠন বর্ণনা করে — কোন উইজেট কার চাইল্ড। কিন্তু স্ক্রিনে প্রতিটি উইজেট আসলে কোথায় (x, y) এবং কত বড় (width, height) হবে, তা ঠিক করে একটি আলাদা ধাপ: লেআউট ইঞ্জিনLayout Engineউইজেট ট্রি ও উপলব্ধ স্ক্রিন-স্পেসের ভিত্তিতে প্রতিটি উইজেটের প্রকৃত পজিশন ও আকার গণনা করার প্রক্রিয়া।। মোবাইল ফ্রেমওয়ার্কগুলোতে দুইটি ভিন্ন দর্শন প্রচলিত।

২ · কনস্ট্রেইন্ট-ভিত্তিক লেআউট

কনস্ট্রেইন্ট-ভিত্তিক লেআউটConstraint-based Layoutপ্রতিটি ভিউয়ের অবস্থান/আকার অন্য ভিউয়ের সাপেক্ষে গাণিতিক সম্পর্ক (কনস্ট্রেইন্ট) দিয়ে বর্ণনা করা হয় -- একটি কনস্ট্রেইন্ট-সলভার সেই সম্পর্কগুলো একসাথে সমাধান করে প্রকৃত পজিশন বের করে। -এ প্রতিটি ভিউয়ের প্রান্ত অন্য ভিউয়ের প্রান্তের সাপেক্ষে সম্পর্ক (constraint) দিয়ে বর্ণনা করা হয় — যেমন "এই বাটনের leading edge = ওই লেবেলের trailing edge + 8pt"। iOS Auto Layout এই মডেলের সবচেয়ে পরিচিত উদাহরণ। নিচের ছদ্মকোডটি (pseudocode — প্রকৃত Auto Layout API সিনট্যাক্স নয়, শুধু ধারণা বোঝানোর জন্য) দেখায় কনস্ট্রেইন্ট কেমন "চিন্তা" করে লেখা হয়:

# এটি প্রকৃত Auto Layout সিনট্যাক্স নয় -- শুধু কনস্ট্রেইন্ট-ভিত্তিক চিন্তাভঙ্গি বোঝানোর ছদ্মকোড

label.leading == container.leading + 16
label.top == container.top + 16

button.leading == label.trailing + 8
button.centerY == label.centerY
button.trailing <= container.trailing - 16

একটি কনস্ট্রেইন্ট-সলভার এই সম্পর্কগুলো একসাথে সমাধান করে প্রতিটি ভিউয়ের প্রকৃত x/y/width/height বের করে — এটি শক্তিশালী (জটিল, ইন্টার-ডিপেন্ডেন্ট লেআউট সম্ভব) কিন্তু বেশি সম্পর্ক থাকলে সলভ করা কম্পিউটেশনালি ব্যয়বহুল ও লেখা তুলনামূলক জটিল হতে পারে।

৩ · ফ্লেক্সবক্স-স্টাইল লেআউট

ফ্লেক্সবক্স-স্টাইল লেআউটFlexbox-like Layoutচাইল্ডগুলো একটি নির্দিষ্ট প্রধান অক্ষ (main axis) বরাবর ক্রমানুসারে প্রবাহিত হয় -- কিছু চাইল্ডের আকার নির্দিষ্ট থাকে, বাকি অবশিষ্ট জায়গা flex-মান অনুপাতে বণ্টিত হয়। -এ চাইল্ডরা একটি main axis (যেমন একটি row-এ অনুভূমিক) বরাবর ক্রমানুসারে সাজানো হয়, আর লম্ব দিকটি হলো cross axis। React Native ও Flutter উভয়ই মূলত এই মডেল অনুসরণ করে (Flutter-এর Row/Column + Expanded, React Native-এর flexDirection + flex প্রপার্টি)। কিছু চাইল্ডের প্রস্থ নির্দিষ্ট (fixed), আর flex: N চিহ্নিত চাইল্ড main axis-এ অবশিষ্ট থাকা জায়গা অন্যান্য flex চাইল্ডের সাথে অনুপাতে ভাগ করে নেয়।

৪ · একটি সত্যিকারের ফ্লেক্সবক্স রো-লেআউট অ্যালগরিদম

নিচের কোড সেলে আমরা একটি কনটেইনার প্রস্থ ৪০০ ধরে চারটি চাইল্ড নিয়ে কাজ করব — [fixed 80, fixed 60, flex(1), fixed 40]। প্রথমে সব fixed চাইল্ডের প্রস্থের যোগফল বের করে কনটেইনার প্রস্থ থেকে বিয়োগ করে অবশিষ্ট জায়গা (remaining_space) বের করা হবে, তারপর সেই জায়গা flex চাইল্ডদের মধ্যে তাদের flex-মান অনুপাতে ভাগ করা হবে, এবং সবশেষে প্রতিটি চাইল্ডের প্রকৃত x-position ধারাবাহিকভাবে (running cursor) গণনা করা হবে।

# একটি সত্যিকারের ফ্লেক্সবক্স-স্টাইল রো-লেআউট অ্যালগরিদম

container_width = 400

children = [
    {"name": "Icon",   "kind": "fixed", "width": 80},
    {"name": "Label",  "kind": "fixed", "width": 60},
    {"name": "Spacer", "kind": "flex",  "flex": 1},
    {"name": "Badge",  "kind": "fixed", "width": 40},
]


def layout_row(container_width, children):
    """একটি সত্যিকারের ফ্লেক্সবক্স-স্টাইল রো-লেআউট -- fixed চাইল্ডের প্রস্থ যোগফল বিয়োগ করে
    অবশিষ্ট জায়গা flex চাইল্ডদের মধ্যে তাদের flex-মান অনুপাতে বণ্টন করে।"""

    fixed_total = sum(c["width"] for c in children if c["kind"] == "fixed")
    flex_total_units = sum(c["flex"] for c in children if c["kind"] == "flex")

    remaining_space = container_width - fixed_total
    flex_unit_width = remaining_space / flex_total_units if flex_total_units else 0

    layout = []
    cursor_x = 0
    for c in children:
        width = c["width"] if c["kind"] == "fixed" else c["flex"] * flex_unit_width
        layout.append({"name": c["name"], "kind": c["kind"], "x": cursor_x, "width": width})
        cursor_x += width

    return layout, fixed_total, remaining_space, cursor_x


layout, fixed_total, remaining_space, total_used = layout_row(container_width, children)

print(f"কনটেইনার প্রস্থ: {container_width}")
print(f"সব fixed চাইল্ডের প্রস্থের যোগফল: {fixed_total}")
print(f"অবশিষ্ট জায়গা (flex চাইল্ডদের জন্য): {container_width} - {fixed_total} = {remaining_space}")
print()

for item in layout:
    print(f"  {item['name']:8s} ({item['kind']:5s}) => x={item['x']:5.1f}, width={item['width']:5.1f}")

print()
print(f"সবগুলো চাইল্ডের প্রস্থ যোগ করলে মোট ব্যবহৃত জায়গা: {total_used}")
assert total_used == container_width, "লেআউট কনটেইনারের প্রস্থের সাথে হুবহু মিলছে না!"
print("যাচাই: মোট ব্যবহৃত জায়গা কনটেইনারের প্রস্থের সমান -- কোনো ফাঁক বা ওভারফ্লো নেই।")