Flutter จัดตำแหน่งสองรายการให้สุดขั้ว - หนึ่งรายการทางซ้ายและอีกชิ้นทางขวา


95

ฉันกำลังพยายามจัดตำแหน่งสองรายการให้สุดขั้วหนึ่งทางซ้ายและอีกรายการทางขวา ฉันมีหนึ่งแถวที่จัดชิดซ้ายแล้วลูกของแถวนั้นจัดชิดขวา อย่างไรก็ตามดูเหมือนว่าแถวลูกกำลังรับคุณสมบัติการจัดตำแหน่งจากพาเรนต์ นี่คือรหัสของฉัน

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

นอกจากนี้ยังมีพื้นที่ว่างเพียงพอบน Row คำถามของฉันคือเหตุใดแถวเด็กจึงไม่แสดงMainAxisAlignment.endทรัพย์สิน

คำตอบ:


195

ใช้ตัวเดียว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,
    ),
  ],
);

2
ในตัวอย่างที่ 2 ฉันใช้ของเขาsettingsRowซึ่งมีText("right")
Rémi Rousselet

ฉันเห็น. พลาดส่วนนั้น
GünterZöchbauer

ขอบคุณ. แต่ด้วยความอยากรู้ว่าทำไมรหัสของฉันไม่ทำงาน mainAxisAlignmentของเด็กที่ไม่ได้เกิดขึ้น คุณสมบัติของผู้ปกครองแซงหน้าเด็ก ๆ หรือไม่?
MistyD

1
อันที่ 2 ดีกว่ามาก
Raghu Mudem

1
@KPradeepKumarReddy หากคุณไม่กลัวว่าวิดเจ็ตทั้งสองนี้อาจทับซ้อนกันหากขนาดของมันใหญ่เกินไปฉันขอแนะนำให้ใช้ Stack จากนั้นให้เด็กสองคนรวมอยู่ในวิดเจ็ต Align (หนึ่งอันมี Alignment.center และอีกอันหนึ่งมี Alignment.centerRight) หรือมีวิดเจ็ตแบบขยายสามรายการในแถวของคุณด้วย flex: 1. อันดับแรกจะมีว่าง (SizedBox) อันดับที่สอง - วิดเจ็ตที่อยู่ตรงกลางของคุณ
Alex Semeniuk

71

วิธีง่ายๆคือการใช้Spacer()ระหว่างสองวิดเจ็ต

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

Spacer () ทำอะไร? ในแถวเดียวกันฉันต้องการให้หนึ่งวิดเจ็ตอยู่ตรงกลางและอีกอันหนึ่งไปทางขวาสุด เป็นไปได้ไหมโดยใช้ตัวเว้นวรรค ()
K Pradeep Kumar Reddy

51

คุณสามารถทำได้หลายวิธี

การใช้ 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(),
  ],
);

เอาท์พุต :

ป้อนคำอธิบายภาพที่นี่


ฉันต้องการหนึ่งวิดเจ็ตที่ตรงกลางและอีกอันอยู่ทางขวาสุด เราจะบรรลุสิ่งนั้นได้อย่างไร?
K Pradeep Kumar Reddy

@KPradeepKumarReddy แนวทางที่ดีคือการใช้Stackในกรณีนั้น
CopsOnRoad

@KPradeepKumarReddy ฉันแน่ใจว่าต้องมีคำถามแบบนี้ใน SO อยู่แล้วสิ่งที่คุณต้องทำคือค้นหาด้วยคีย์เวิร์ดที่ถูกต้อง ฉันไม่สามารถแสดงรหัสที่นี่ให้คุณเห็นในความคิดเห็นได้ แต่แนวคิดคือการใช้StackโดยลูกคนแรกคือAlign(ถูก) และที่สองอาจเป็น a Centerหรือง่ายAlignก็ได้
CopsOnRoad

0

ใช่CopsOnRoadถูกต้องผ่านสแต็กคุณสามารถจัดตำแหน่งหนึ่งไปทางขวาและอีกอันที่กึ่งกลาง

Stack(
    children: [
      Align(
        alignment: Alignment.centerRight,
        child: Text("right"),
      ),
      Align(
        alignment: Alignment.center,
        child: Text("center"),
      )
    ],
  )
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.