বাড়াবাড়ি দুটি আইটেমকে চূড়ান্তভাবে সারিবদ্ধ করে - একটি বাম দিকে এবং একটি ডানদিকে

Question

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

var SettingsRow = new Row(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
                Text("Right",softWrap: true,),
            ],
        );

        var nameRow = new Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
                Text("Left"),
                SettingsRow,
            ],
        );

ফলস্বরূপ আমি এই জাতীয় কিছু পেতে

Left Right

আমি যা চাই তা হ'ল

Left      Right

এছাড়াও সারিটিতে পর্যাপ্ত জায়গা রয়েছে। আমার প্রশ্ন হ'ল শিশু রো কেন তার MainAxisAlignment.endসম্পত্তি প্রদর্শন করছে না ?

Answer 1

Rowপরিবর্তে একটি একক ব্যবহার করুন mainAxisAlignment: MainAxisAlignment.spaceBetween।

new Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    new Text("left"),
    new Text("right")
  ]
);

অথবা আপনি ব্যবহার করতে পারেন Expanded

new Row(
  children: [
    new Text("left"),
    new Expanded(
      child: settingsRow,
    ),
  ],
);

Comments

২ য় উদাহরণে আমি তার ব্যবহার করি settingsRow, যা এতে রয়েছেText("right")

— রমি রাউসলেট

আমি দেখি. সেই অংশটি মিস করেছেন

— গন্টার জ্যাচবাউয়ার

ধন্যবাদ কিন্তু কৌতূহলের বাইরে আমার কোডটি কেন কাজ করে না? mainAxisAlignmentশিশুর ঘটবে না। বাবাদের সম্পত্তি কি বাচ্চাদের ছাড়িয়ে যায়?

— মিস্টিডি

দ্বিতীয় এক খুব ভাল।

— রঘু মুদেম

@ কেপ্রদীপকুমার রেডি যদি আপনি ভয় পান না যে আকারগুলি খুব বড় হয় তবে এই দুটি উইজেটগুলি একে অপরের সাথে ওভারল্যাপ হয়ে যেতে পারে, আমি স্ট্যাক ব্যবহার করার পরামর্শ দিই এবং তারপরে দুটি বাচ্চা অ্যালিঞ্জ উইজেটগুলিতে আবৃত (একটি আলাইনমেন্ট.সেন্টারযুক্ত, অন্য একটি আলাইনমেন্ট.সেন্টারাইট সহ)। অথবা, আপনার সারিতে তিনটি প্রসারিত উইজেট রয়েছে যা ফ্লেক্স সহ: 1. প্রথমটিতে ফাঁকা (সাইজডবক্স) থাকবে, দ্বিতীয় - আপনার কেন্দ্রিক উইজেট (কেন্দ্রের মধ্যে আবৃত) এবং তৃতীয়টিতে আপনার ডান-প্রান্তিকৃত উইজেট থাকবে।

— অ্যালেক্স সেমেনিয়ুক

Answer 2

একটি সহজ সমাধান Spacer()দুটি উইজেট মধ্যে ব্যবহার করা হবে

Row(
  children: [
    Text("left"),
    Spacer(),
    Text("right")
  ]
);

Comments

স্পেসার () কী করে? এক সারি, আমি একটি উইজেটকে কেন্দ্রে এবং অন্যটিতে চূড়ান্ত ডানদিকে রাখতে চাই। স্পেসার () ব্যবহার করে এটি কি সম্ভব?

— কে প্রদীপ কুমার রেড্ডি

Answer 3

আপনি এটি বিভিন্ন উপায়ে করতে পারেন।

ব্যবহার mainAxisAlignment: MainAxisAlignment.spaceBetween

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    FlutterLogo(),
    FlutterLogo(),
  ],
);

---

ব্যবহার Spacer

Row(
  children: <Widget>[
    FlutterLogo(),
    Spacer(),
    FlutterLogo(),
  ],
);

---

ব্যবহার Expanded

Row(
  children: <Widget>[
    FlutterLogo(),
    Expanded(child: SizedBox()),
    FlutterLogo(),
  ],
);

---

ব্যবহার Flexible

Row(
  children: <Widget>[
    FlutterLogo(),
    Flexible(fit: FlexFit.tight, child: SizedBox()),
    FlutterLogo(),
  ],
);

---

আউটপুট :

Comments

আমি কেন্দ্রে একটি উইজেট চাই এবং অন্যটি চরম ডানদিকে চাই। কীভাবে আমরা তা অর্জন করতে পারি?

— কে প্রদীপ কুমার রেড্ডি

@ কেপ্রদীপ কুমার রেডি এই ক্ষেত্রে একটি ভাল পন্থা ব্যবহার করা উচিত Stack।

— পুলিশঅনরোড করুন

@ কেপ্রদীপকুমার রেডি আমি নিশ্চিত যে এসও তে ইতিমধ্যে এই জাতীয় কিছু প্রশ্ন অবশ্যই আছে, আপনাকে যা করতে হবে তা হল সঠিক কীওয়ার্ড দিয়ে অনুসন্ধান করা। আমি এখানে কোডটি আসলে আপনাকে মন্তব্যে দেখাতে পারছি না, তবে ধারণাটি ব্যবহার করা Stackহচ্ছে যার প্রথম সন্তানের Align(ডান) এবং দ্বিতীয়টি একটি Centerবা সাধারণ হতে পারে Align।

— কপসঅনরোড করুন

Answer 4

হ্যাঁ CopsOnRoadঠিক আছে, স্ট্যাকের মাধ্যমে আপনি একটিকে ডানদিকে এবং অন্যকে কেন্দ্রের দিকে প্রান্তিককরণ করতে পারেন।

Stack(
    children: [
      Align(
        alignment: Alignment.centerRight,
        child: Text("right"),
      ),
      Align(
        alignment: Alignment.center,
        child: Text("center"),
      )
    ],
  )