প্রথমত, আমি বলতে চাই যে আমি আপনার সংগ্রামগুলি বুঝতে পারি বলে আমি এটির সাথে আপনাকে সাহায্য করতে পেরে আনন্দিত - এটি নিজে নিজে খুঁজে বের করার সুবিধাও রয়েছে (ডকুমেন্টেশনটি আশ্চর্যজনক)।
CustomSingleChildLayoutআমি CustomMultiChildLayoutআপনাকে ব্যাখ্যা করার পরে কি হবে তা সুস্পষ্ট হবে ।
এই উইজেটের মূল বিষয়টি আপনাকে একটি ফাংশনে এই উইজেটে দেওয়া শিশুদের বিন্যাস করতে দেয়, অর্থাত্ তাদের অবস্থান এবং আকারগুলি একে অপরের উপর নির্ভর করতে পারে, যা প্রাক-বিল্ট উইজেট ব্যবহার করে আপনি অর্জন করতে পারবেন না isStack
CustomMultiChildLayout(
children: [
// Widgets you want to layout in a customized manner
],
)
আপনার বাচ্চাদের ছড়িয়ে দেওয়া শুরু করার আগে এখন আরও দুটি পদক্ষেপ নিতে হবে:
- আপনার পাস করা প্রতিটি শিশুর
childrenএকটি হওয়া দরকার LayoutIdএবং আপনি যে উইজেটটি বাস্তবে এটি শিশু হিসাবে দেখাতে চান তা পাস করে LayoutId। idএককভাবে আপনার উইজেট চেনা যাবে, যখন তাদের পাড়ার তাদের প্রবেশযোগ্য উপার্জন:
CustomMultiChildLayout(
children: [
LayoutId(
id: 1, // The id can be anything, i.e. any Object, also an enum value.
child: Text('Widget one'), // This is the widget you actually want to show.
),
LayoutId(
id: 2, // You will need to refer to that id when laying out your children.
child: Text('Widget two'),
),
],
)
- আপনার একটি
MultiChildLayoutDelegateসাবক্লাস তৈরি করা দরকার যা লেআউট অংশটি পরিচালনা করে। এখানে ডকুমেন্টেশন খুব বিস্তৃত মনে হয়।
class YourLayoutDelegate extends MultiChildLayoutDelegate {
// You can pass any parameters to this class because you will instantiate your delegate
// in the build function where you place your CustomMultiChildLayout.
// I will use an Offset for this simple example.
YourLayoutDelegate({this.position});
final Offset position;
}
এখন, সমস্ত সেটআপ হয়ে গেছে এবং আপনি আসল লেআউটটি প্রয়োগ করতে শুরু করতে পারেন। এর জন্য আপনি তিনটি পদ্ধতি ব্যবহার করতে পারেন:
hasChild, যা আপনাকে কোনও নির্দিষ্ট আইডি (মনে আছে LayoutId?) পাস করে কিনা তা পরীক্ষা করতে দেয় children, যদি সেই আইডির কোনও শিশু উপস্থিত থাকে।
layoutChild, যা আপনাকে প্রতিটি আইডি , প্রতিটি সন্তানের জন্য কল করতে হবে , ঠিক একবার সরবরাহ করা হয়েছে এবং এটি আপনাকে Sizeসেই সন্তানের পরিচয় দেবে।
positionChild, যা আপনাকে Offset(0, 0)আপনার নির্দিষ্ট করা কোনও অফসেট থেকে অবস্থান পরিবর্তন করতে দেয় ।
আমি মনে করি ধারণাটি এখন বেশ পরিষ্কার হওয়া উচিত, এ কারণেই আমি উদাহরণস্বরূপ একটি প্রতিনিধিকে কীভাবে প্রয়োগ করব তা বর্ণনা করব CustomMultiChildLayout:
class YourLayoutDelegate extends MultiChildLayoutDelegate {
YourLayoutDelegate({this.position});
final Offset position;
@override
void performLayout(Size size) {
// `size` is the size of the `CustomMultiChildLayout` itself.
Size leadingSize = Size.zero; // If there is no widget with id `1`, the size will remain at zero.
// Remember that `1` here can be any **id** - you specify them using LayoutId.
if (hasChild(1)) {
leadingSize = layoutChild(
1, // The id once again.
BoxConstraints.loose(size), // This just says that the child cannot be bigger than the whole layout.
);
// No need to position this child if we want to have it at Offset(0, 0).
}
if (hasChild(2)) {
final secondSize = layoutChild(
2,
BoxConstraints(
// This is exactly the same as above, but this can be anything you specify.
// BoxConstraints.loose is a shortcut to this.
maxWidth: size.width,
maxHeight: size.height,
),
);
positionChild(
2,
Offset(
leadingSize.width, // This will place child 2 to the right of child 1.
size.height / 2 - secondSize.height / 2, // Centers the second child vertically.
),
);
}
}
}
দুই অন্যান্য উদাহরণ ডকুমেন্টেশন (চেক প্রস্তুতি থেকে এক ধাপ 2 ) এবং একটি বাস্তব জগতে উদাহরণ আমি কিছু সময় ফিরে লিখেছিলেন feature_discovery: প্যাকেজ MultiChildLayoutDelegateবাস্তবায়ন এবং CustomMultiChildLayoutএ buildপদ্ধতি ।
শেষ পদক্ষেপটি shouldRelayoutপদ্ধতিটিকে ওভাররাইড করছে , performLayoutকোন পুরানো প্রতিনিধিটির সাথে তুলনা করে সময় মতো কোনও নির্দিষ্ট সময়ে আবার ফোন করা উচিত কিনা তা নিয়ন্ত্রণ করে, (বিকল্পভাবে আপনি ওভাররাইডও করতে পারেন getSize) এবং প্রতিনিধিটিকে আপনার সাথে যুক্ত করে CustomMultiChildLayout:
class YourLayoutDelegate extends MultiChildLayoutDelegate {
YourLayoutDelegate({this.position});
final Offset position;
@override
void performLayout(Size size) {
// ... (layout code from above)
}
@override
bool shouldRelayout(YourLayoutDelegate oldDelegate) {
return oldDelegate.position != position;
}
}
CustomMultiChildLayout(
delegate: YourLayoutDelegate(position: Offset.zero),
children: [
// ... (your children wrapped in LayoutId's)
],
)
বিবেচ্য বিষয়
আমি এই উদাহরণটিতে আইডি হিসাবে ব্যবহার করেছি 1এবং আইডি ব্যবহার করা সম্ভবত আপনার নির্দিষ্ট আইডি থাকলে আইডিকে পরিচালনা করার সেরা উপায়।2enum
আপনি একটি পাস করতে পারেন Listenableথেকে super(যেমন super(relayout: animation)) আপনি বিন্যাস প্রক্রিয়া বা ট্রিগার এটা সাধারণভাবে একটি listenable উপর ভিত্তি করে সজীব করতে চাই।
ডকুমেন্টেশনটি বর্ণনা করেছে যা আমি উপরে বর্ণিত সত্যই ভালভাবে বর্ণনা করেছি এবং এখানে আপনি এটিও দেখতে পাবেন যে আমি কেন বললাম যে এটি CustomSingleChildLayoutকীভাবে CustomMultiChildLayoutকাজ করে তা বোঝার পরে খুব স্পষ্ট হবে :
যখন একাধিক উইজেটের আকার এবং অবস্থানের মধ্যে জটিল সম্পর্ক থাকে তখন কাস্টমমল্টিচিল্ড লেআউট উপযুক্ত। একক সন্তানের লেআউট নিয়ন্ত্রণ করতে কাস্টমসিংসিল্ড লেআউট আরও উপযুক্ত।
এর অর্থ এটিও হ'ল CustomSingleChildLayoutআমি উপরে বর্ণিত একই নীতিগুলি ব্যবহার করে তবে কোনও আইডি ছাড়াই কারণ কেবলমাত্র একক শিশু রয়েছে। পরিবর্তে
আপনাকে একটি ব্যবহার করতে SingleChildLayoutDelegateহবে, যার বিন্যাসটি বাস্তবায়নের জন্য বিভিন্ন পদ্ধতি রয়েছে (তাদের সকলেরই ডিফল্ট আচরণ রয়েছে, তাই তারা ওভাররাইড করার জন্য প্রযুক্তিগতভাবে সমস্ত বিকল্প ):
অন্য সব কিছুই হুবহু (মনে রাখবেন যে আপনার প্রয়োজন নেই LayoutIdএবং কেবলমাত্র তার পরিবর্তে একটি একা সন্তান রয়েছে children)।
এটি কি CustomMultiChildLayoutউপর নির্মিত হয়।
এটি ব্যবহারের জন্য তোলা সম্পর্কে আরও গভীর জ্ঞান প্রয়োজন এবং এটি আবার আরও জটিল complicated তবে আপনি আরও স্বনির্ধারণ করতে চাইলে এটি আরও ভাল বিকল্প কারণ এটি আরও নিম্ন স্তরের। এর একটি বড় সুবিধা রয়েছে CustomMultiChildLayout(সাধারণত, আরও নিয়ন্ত্রণ রয়েছে):
CustomMultiChildLayout আকার করতে পারেন না নিজেই তার সন্তানদের উপর ভিত্তি করে (দেখুন যুক্তি জন্য ভাল ডকুমেন্টেশন সংক্রান্ত ইস্যু )।
আমি MultiChildRenderObjectWidgetএখানে স্পষ্ট কারণগুলির জন্য কীভাবে ব্যবহার করব তা ব্যাখ্যা করব না , তবে আপনি যদি আগ্রহী হন তবে 20 শে জানুয়ারী 2020 এর পরে আপনি ফ্লার্ট ক্লক চ্যালেঞ্জের কাছে আমার জমাটি যাচাই করতে পারেন , যাতে আমি MultiChildRenderObjectWidgetব্যাপকভাবে ব্যবহার করি - আপনি এই সম্পর্কে একটি নিবন্ধও পড়তে পারেন , যা এটি সমস্ত কীভাবে কাজ করে তার কিছুটা ব্যাখ্যা করা উচিত।
আপাতত আপনি মনে রাখতে পারেন যে MultiChildRenderObjectWidgetএটিই CustomMultiChildLayoutসম্ভব করে তোলে এবং এটি সরাসরি ব্যবহার আপনাকে কিছু দুর্দান্ত সুবিধা দেয় যেমন ব্যবহার না করা LayoutIdএবং পরিবর্তে RenderObjectসরাসরি তার পিতামাতার ডেটা অ্যাক্সেস করতে সক্ষম হওয়া ।
মজার ব্যাপার
আমি সমস্ত কোড প্লেইন পাঠ্যে লিখেছি (স্ট্যাকওভারফ্লো পাঠ্য ক্ষেত্রে), সুতরাং যদি ত্রুটিগুলি থাকে তবে দয়া করে সেগুলি আমার দিকে নির্দেশ করুন এবং আমি সেগুলি ঠিক করব।