কন্টেইনার আচরণ সেট করুন

FlexBox কন্টেইনারের আচরণ কনফিগার করতে, একটি FlexBoxConfig ব্লক তৈরি করুন এবং config প্যারামিটার ব্যবহার করে এটি সরবরাহ করুন।

FlexBox(
    config = {
        direction = FlexDirection.Column
        wrap = FlexWrap.Wrap
        alignItems = FlexAlignItems.Center
        alignContent = FlexAlignContent.SpaceAround
        justifyContent = FlexJustifyContent.Center
        gap(16.dp)
    }
) { // child items
}
FlexBoxSnippets.kt

লেআউটের দিক, মোড়ক আচরণ, সারিবদ্ধকরণ এবং আইটেমগুলির মধ্যে ফাঁক নির্ধারণ করতে FlexBoxConfig ব্যবহার করুন।

লেআউটের দিকনির্দেশনা

direction বৈশিষ্ট্যটি প্রধান অক্ষকে সংজ্ঞায়িত করে, যা নির্দেশ করে যে দিকনির্দেশনা আইটেমগুলি কোনটিতে স্থাপন করা হয়েছে।

• Row (ডিফল্ট): প্রধান অক্ষকে অনুভূমিক হিসেবে সেট করে। বাম-থেকে-ডান লোকেলে এটি বাম-থেকে-ডান হবে, ডান-থেকে-বামে বিপরীতটি থাকবে।
• RowReverse : Row এর দিক বিপরীত করে।
• Column : প্রধান অক্ষকে উল্লম্ব, উপরে থেকে নীচে সেট করে।
• ColumnReverse : Column দিক বিপরীত করে।

আইটেমগুলি সারিবদ্ধ করুন এবং অতিরিক্ত স্থান বিতরণ করুন

নিম্নলিখিত বিভাগগুলিতে কীভাবে আইটেমগুলিকে সারিবদ্ধ করতে হয় এবং প্রধান এবং ক্রস অক্ষ বরাবর অতিরিক্ত স্থান বিতরণ করতে হয় তা বর্ণনা করা হয়েছে।

প্রধান অক্ষ বরাবর

মূল অক্ষ বরাবর আইটেম বিতরণ করতে justifyContent ব্যবহার করুন। নিচের টেবিলটি Row হলে আচরণ দেখায়।

Start
Center
End
SpaceBetween
SpaceAround
SpaceEvenly

ক্রস অক্ষ বরাবর

একটি একক লাইনের মধ্যে ক্রস অক্ষ বরাবর আইটেমগুলিকে সারিবদ্ধ করতে alignItems ব্যবহার করুন। alignSelf মডিফায়ার ব্যবহার করে পৃথক আইটেম দ্বারা এই আচরণটি ওভাররাইড করা যেতে পারে।

নিচের চিত্রগুলি দিকটি Row হলে আচরণ দেখায়:

	Start	End	Center	Stretch	Baseline

ক্রস অক্ষের সাথে লাইন সারিবদ্ধ করতে এবং লাইনের মধ্যে অতিরিক্ত স্থান বিতরণ করতে alignContent ব্যবহার করুন। এই বৈশিষ্ট্যটি কেবল তখনই প্রযোজ্য যখন একাধিক লাইন থাকে (র্যাপিং সক্ষম থাকে)। নিম্নলিখিত চিত্রগুলি যখন দিকটি Row হয় তখন আচরণটি দেখায়:

	Start	End	Center	Stretch	SpaceBetween	SpaceAround

জিনিসপত্র মোড়ানো

মোড়ানোর ফলে একটি FlexBox কন্টেইনার বহু-লাইনে পরিণত হয়, এমন আইটেমগুলিকে সরানো যা ক্রস-অক্ষ বরাবর একটি নতুন সারি বা কলামে ফিট করে না। wrap ব্যবহার করে মোড়ানো আচরণ কনফিগার করুন।

FlexWrap মান	দিকনির্দেশনা Row ব্যবহারের উদাহরণ
NoWrap (ডিফল্ট): আইটেমগুলিকে মোড়ানো থেকে বিরত রাখে। প্রধান আকার অপর্যাপ্ত হলে আইটেমগুলি ওভারফ্লো হয়।
Wrap : যখন কোনও আইটেমের জন্য পর্যাপ্ত স্থান থাকে না (আরও কোনও ফাঁক ), তখন ক্রস অক্ষের দিকে একটি নতুন রেখা তৈরি করা হয়। উদাহরণস্বরূপ, যদি দিকটি Row হয়, তাহলে নীচে একটি নতুন রেখা যুক্ত করা হয়।
WrapReverse : Wrap এর মতোই, তবে নতুন লাইনটি ক্রস অক্ষের বিপরীত দিকে যোগ করা হয়। উদাহরণস্বরূপ, যদি দিকটি Row হয়, তাহলে উপরে একটি নতুন লাইন যোগ করা হয়।

নিচের উদাহরণটি দেখায় কিভাবে FlexBox মোড়ানো অ্যালগরিদম কাজ করে। FlexBox কন্টেইনারটির প্রধান আকার 100dp , wrap FlexWrap.Wrap এ সেট করা হয়েছে এবং একটি ফাঁক 8dp । এতে যথাক্রমে 20dp , 40dp এবং 50dp এর basis সহ তিনটি আইটেম রয়েছে।

লাইনে 100dp খালি জায়গা আছে। চাইল্ড ১ হল 20dp । জায়গা আছে, তাই চাইল্ড ১ লাইনে রাখা হয়েছে।

চিত্র ১. FlexBox কন্টেইনারে প্রথম আইটেমটি স্থাপন করা হয়েছে।

লাইনে 80dp খালি জায়গা আছে। ফাঁক 8dp । চাইল্ড ২ হল 40dp । প্রয়োজনীয় জায়গা 48dp । জায়গা আছে, তাই ফাঁক এবং চাইল্ড ২ লাইনের মধ্যে স্থাপন করা হয়েছে।

চিত্র ২। প্রথম আইটেমের পরে FlexBox কন্টেইনারে দ্বিতীয় আইটেমটি স্থাপন করা হয়েছে।

লাইনে 32dp খালি জায়গা আছে। ফাঁক হল 8dp । চাইল্ড 3 হল 50dp । প্রয়োজনীয় জায়গা হল 58dp । বর্তমান লাইনে পর্যাপ্ত জায়গা নেই, তাই চাইল্ড 3 একটি নতুন লাইনে স্থাপন করা হয়েছে।

চিত্র ৩। তৃতীয় আইটেমটি একটি নতুন লাইনে স্থাপন করা হয়েছে কারণ এটি প্রথম লাইনে ফিট করে না।

আইটেমগুলির মধ্যে ফাঁক যোগ করুন

rowGap এবং columnGap ব্যবহার করে সারি এবং কলামের মধ্যে ফাঁক যোগ করুন। শিশুদের জন্য ফাঁকা স্থান পরিবর্তনকারী সংশোধক যোগ করা এড়াতে এটি কার্যকর।

rowGap আইটেম এবং লাইনের মধ্যে উল্লম্ব স্থান যোগ করে।	columnGap আইটেম এবং লাইনের মধ্যে অনুভূমিক স্থান যোগ করে।	gap হল একটি সুবিধাজনক ফাংশন যা columnGap এবং rowGap উভয়ই যোগ করে।