เหตุใด Row จึงไม่อยู่ตรงกลางในแนวนอนภายในคอลัมน์
ดังที่เราทราบโดยค่าเริ่มต้นคอลัมน์ในแนวนอนจะจัดกึ่งกลางเด็ก ๆ หากมีความกว้างเต็ม แต่เมื่อฉันวางไพ่สองใบและหนึ่งแถวในคอลัมน์ไพ่สองใบจะวางตรงกลางแนวนอนโดยการกระพือปีก แต่แถวยังคงเหมือนเดิมที่ตำแหน่งเริ่มต้น? ทำไม?
ฉันคิดว่าแถวควรอยู่ตรงกลางในแนวนอนเพราะเป็นลูกของ 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'),
],
),
],
),
),
);
}
}
เอาต์พุตของรหัสนี้
คำตอบ
สิ่งนี้เกิดขึ้นเนื่องจากโดยค่าเริ่มต้น Row จะใช้พื้นที่แนวนอนทั้งหมด คุณสามารถแก้ไขได้โดยบอกให้ใช้พื้นที่น้อยที่สุด:
Row(
mainAxisSize: MainAxisSize.min,
...
)
การตั้งค่าmainAxisAlignment
Row เป็นMainAxisAlignment.center
จะใช้ได้เฉพาะในกรณีที่มีวิดเจ็ตเดียวอยู่ใน Row มันบอกให้เด็ก ๆ ไปที่ศูนย์เท่านั้น
โดยmainAxisSize
คุณสมบัติดีฟอลต์อยู่MainAxisSize.max
ในวิดเจ็ตRowสิ่งที่คุณต้องทำก็แค่เปลี่ยนเป็นเพื่อMainAxisSize.min
ให้ได้รับผลกระทบจากวิดเจ็ตหลักซึ่งในตัวอย่างนี้คือคอลัมน์
Row(
mainAxisSize: MainAxisSize.min,
...
)
พยายามส่งmainAxisAlignment
อาร์กิวเมนต์ไปยังแถวของคุณ ตัวอย่างเช่น
Row(
mainAxisAlignment: MainAxisAlignment.center,
...
)
สิ่งนี้จะทำให้เด็ก ๆ ของแถวเป็นศูนย์กลาง