क्यों रो एक स्तंभ के अंदर क्षैतिज रूप से केंद्र नहीं है
जैसा कि हम डिफ़ॉल्ट रूप से जानते हैं, कॉलम क्षैतिज रूप से अपने बच्चों को केंद्र में रखता है यदि इसकी पूरी चौड़ाई है। लेकिन जब मैंने दो कार्ड और एक पंक्ति को एक कॉलम के अंदर रखा, तो दो कार्डों को क्षैतिज रूप से केंद्र में रखा जाता है, लेकिन पंक्ति अपनी प्रारंभिक स्थिति में समान रहती है ? क्यों?
मुझे लगता है कि पंक्ति क्षैतिज रूप से केंद्र होनी चाहिए क्योंकि यह मेरे मामले में कॉलम का एक बच्चा है लेकिन ऐसा नहीं है।
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(
mainAxisSize: MainAxisSize.min,
...
)
mainAxisAlignment
रो की सेटिंग MainAxisAlignment.center
केवल तभी काम करेगी जब रो के अंदर एक विजेट होगा। यह केवल अपने बच्चों को केंद्र में जाने के लिए कहता है।
डिफ़ॉल्ट रूप से mainAxisSize
संपत्ति है MainAxisSize.max
में पंक्ति विजेट, आपको बस इतना करना है बस इसे बदल जाता है करने के लिए है क्या MainAxisSize.min
, माता पिता विजेट द्वारा प्रभावित करने के लिए, इस उदाहरण में जो है कॉलम
Row(
mainAxisSize: MainAxisSize.min,
...
)
mainAxisAlignment
अपने रो को तर्क देने की कोशिश करें । उदाहरण के लिए
Row(
mainAxisAlignment: MainAxisAlignment.center,
...
)
इससे रो के बच्चे सेंट्रलाइज्ड होंगे।