เหตุใด Row จึงไม่อยู่ตรงกลางในแนวนอนภายในคอลัมน์

Aug 17 2020

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

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter App'),
      ),
      body: Container(
        color: Colors.purple,
        height: double.infinity,
        child: Column(
          //  mainAxisAlignment: MainAxisAlignment.center,
          //  crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Card(
              child: Text(
                'Chart',
                style: TextStyle(fontSize: 20.0),
              ),
              elevation: 5,
              color: Colors.blue,
            ),
            Card(
              child: Text(
                'list of tx',
                style: TextStyle(
                  fontSize: 20.0,
                ),
              ),
              color: Colors.purple,
            ),
            Row(
              children: [
                Text('this is row'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}



เอาต์พุตของรหัสนี้

คำตอบ

1 Uni Aug 17 2020 at 16:14

สิ่งนี้เกิดขึ้นเนื่องจากโดยค่าเริ่มต้น Row จะใช้พื้นที่แนวนอนทั้งหมด คุณสามารถแก้ไขได้โดยบอกให้ใช้พื้นที่น้อยที่สุด:

Row(
    mainAxisSize: MainAxisSize.min,
    ...
)

การตั้งค่าmainAxisAlignmentRow เป็นMainAxisAlignment.centerจะใช้ได้เฉพาะในกรณีที่มีวิดเจ็ตเดียวอยู่ใน Row มันบอกให้เด็ก ๆ ไปที่ศูนย์เท่านั้น

2 faroukosama Aug 17 2020 at 16:17

โดยmainAxisSizeคุณสมบัติดีฟอลต์อยู่MainAxisSize.maxในวิดเจ็ตRowสิ่งที่คุณต้องทำก็แค่เปลี่ยนเป็นเพื่อMainAxisSize.minให้ได้รับผลกระทบจากวิดเจ็ตหลักซึ่งในตัวอย่างนี้คือคอลัมน์

Row(
    mainAxisSize: MainAxisSize.min,
    ...
)
1 Yash Aug 17 2020 at 16:08

พยายามส่งmainAxisAlignmentอาร์กิวเมนต์ไปยังแถวของคุณ ตัวอย่างเช่น

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    ...
)

สิ่งนี้จะทำให้เด็ก ๆ ของแถวเป็นศูนย์กลาง