स्पंदन: ऊर्ध्वाधर केंद्र स्तंभ

Question

फ़्लटर में एक कॉलम को लंबवत कैसे केंद्र करें? मैंने विजेट "नया केंद्र" का उपयोग किया है। मैंने विजेट "नया केंद्र" का उपयोग किया है, लेकिन यह मेरे कॉलम को लंबवत रूप से केंद्र नहीं करता है? कोई भी विचार मददगार होगा....

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Thank you"),
    ),
    body: new Center(
      child: new Column(
        children: <Widget>[
          new Padding(
            padding: new EdgeInsets.all(25.0),
            child: new AnimatedBuilder(
              animation: animationController,
              child: new Container(
                height: 175.0,
                width: 175.0,
                child: new Image.asset('assets/angry_face.png'),
              ),
              builder: (BuildContext context, Widget _widget) {
                return new Transform.rotate(
                  angle: animationController.value * 6.3,
                  child: _widget,
                );
              },
            ),
          ),
          new Text('We are glad we could serve you...', style: new TextStyle(
              fontSize: 16.0,
              fontWeight: FontWeight.w600,
              color: Colors.black87),),
          new Padding(padding: new EdgeInsets.symmetric(vertical: 5.0, horizontal: 0.0)),
          new Text('We appreciate your feedback ! !', style: new TextStyle(
              fontSize: 13.0,
              fontWeight: FontWeight.w200,
              color: Colors.black87),),
        ],
      ),
    ),
  );
}

Answer 1

अजीज द्वारा प्रस्तावित समाधान होगा:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children:children,
)

पैडिंग के कारण यह सटीक केंद्र में नहीं होगा:

padding: new EdgeInsets.all(25.0),

बिल्कुल केंद्र स्तंभ बनाने के लिए - कम से कम इस मामले में - आपको गद्दी को हटाने की आवश्यकता होगी।

Answer 2

प्रयत्न:

Column(
 mainAxisAlignment: MainAxisAlignment.center,
 crossAxisAlignment: CrossAxisAlignment.center,
 children:children...)

Comments

इसके पहले कोशिश की। यह केंद्र करता है, लेकिन यह इसे केंद्र नहीं बनाता है?

— ज़्यूसॉक्स

यह एक मुद्दा था। अब यह ठीक काम करता है, धन्यवाद!

— ज़ीसूक्स

Answer 3

कॉलम के साथ, उपयोग करें:

mainAxisAlignment: MainAxisAlignment.center

यह अपने बच्चों को अपने मूल स्थान के केंद्र में लंबवत रूप से संरेखित करता है

Answer 4

इसको आजमाओ। यह लंबवत और क्षैतिज रूप से केंद्र में है।

Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: children,
  ),
)

Answer 5

आप नियंत्रित करते हैं कि कैसे एक पंक्ति या स्तंभ अपने बच्चों को mainAxisAlignment और crossAxisAlignment गुणों का उपयोग करके संरेखित करता है। एक पंक्ति के लिए, मुख्य अक्ष क्षैतिज रूप से चलता है और क्रॉस अक्ष ऊर्ध्वाधर रूप से चलता है। एक कॉलम के लिए, मुख्य अक्ष लंबवत रूप से चलता है और क्रॉस अक्ष क्षैतिज रूप से चलता है।

 mainAxisAlignment: MainAxisAlignment.center,
 crossAxisAlignment: CrossAxisAlignment.center,

Answer 6

एक और समाधान!

अगर आप विजेट को वर्टिकल रूप में सेट करना चाहते हैं, तो आप इसके लिए लिस्ट व्यू का उपयोग कर सकते हैं। उदाहरण के लिए: मैंने तीन बटन का उपयोग किया और उन्हें सूची दृश्य के अंदर जोड़ा, जिसके बाद

संकोचन: सही -> इस सूची दृश्य के साथ केवल उस स्थान पर कब्जा होता है, जिसकी आवश्यकता है।

import 'package:flutter/material.dart';

class List extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final button1 =
        new RaisedButton(child: new Text("Button1"), onPressed: () {});
    final button2 =
        new RaisedButton(child: new Text("Button2"), onPressed: () {});
    final button3 =
        new RaisedButton(child: new Text("Button3"), onPressed: () {});
    final body = new Center(
      child: ListView(
        shrinkWrap: true,
        children: <Widget>[button1, button2, button3],
     ),
    );

    return new Scaffold(
        appBar: new AppBar(
          title: Text("Sample"),
        ),
        body: body);
  }
}    
void main() {
  runApp(new MaterialApp(
    home: List(),
  ));
}

आउटपुट:

Comments

मुझे ठीक इसी की आवश्यकता थी। केंद्र और सूची दृश्य को जिस तरह से संयुक्त किया गया है, उससे प्यार करें।

— जूलियन ओटो

Answer 7

मेरे लिए समस्या यह थी कि कॉलम के अंदर विस्तार किया गया था जिसे मुझे हटाना था और यह काम कर गया।

Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Expanded( // remove this
              flex: 2,
              child: Text("content here"),
            ),
          ],
        )

Answer 8

स्तंभ का उपयोग करते समय, स्तंभ विजेट के अंदर इसका उपयोग करें:

mainAxisAlignment: MainAxisAlignment.center

यह अपने बच्चों (ओं) को अपने मूल स्थान के केंद्र में संरेखित करता है जो इसकी मुख्य धुरी है यानी लंबवत

या, स्तंभ को केंद्र विजेट से लपेटें:

Center(
  child: Column(
    children: <ListOfWidgets>,
  ),
)

यदि यह समस्या को हल नहीं करता है तो एक विस्तृत विजेट के साथ मूल कंटेनर को लपेटें ..

Expanded(
   child:Container(
     child: Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: children,
     ),
   ),
)

Answer 9

आप उपयोग कर सकते हैं। mainAxisAlignment:MainAxisAlignment.center यह स्तंभ वार में केंद्र के माध्यम से सामग्री होगी। `crossAxisAlignment: CrossAxisAlignment.center 'यह पंक्ति में केंद्र में आइटम संरेखित करेगा।

Container( alignment:Alignment.center, Child: Column () )

बस उपयोग करें। Center ( Child: Column () ) या पैडिंग विजेट के साथ रैप करें। और पेडिंग को समायोजित करें ऐसे कॉलम बच्चे केंद्र में हैं।