颤振：垂直中心柱答案

【问题标题】：Flutter : Vertically center column颤振：垂直中心柱
【发布时间】：2019-01-03 20:37:05
【问题描述】：

如何在 Flutter 中垂直居中列？我使用了小部件“新中心”。我使用了小部件“新中心”，但它没有垂直居中我的列？任何想法都会有所帮助....

@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),),
        ],
      ),
    ),
  );
}

【问题讨论】：

标签： flutter dart center flutter-column

【解决方案1】：

另一种解决方案！

如果你想将小部件设置为中心垂直形式，你可以使用 ListView 。例如：我使用了三个按钮并将它们添加到 ListView 中，然后是

shrinkWrap: true -> 这个 ListView 只占用需要的空间。

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(),
  ));
}

输出：

【讨论】：

这正是我所需要的。喜欢 Center 和 ListView 在这里结合的方式。

【解决方案2】：

Aziz 提出的解决方案是：

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    //your widgets here...
  ],
)

由于填充，它不会位于确切的中心：

padding: EdgeInsets.all(25.0),

要准确地制作中心列 - 至少在这种情况下 - 您需要删除填充。

【讨论】：

【解决方案3】：

CrossAlignment.center 使用 Width of the 'Child Widget' 将自身居中，因此在页面开始处呈现。

Column is centered within the page body's 'Center Container' 时，CrossAlignment.center 使用页面主体的 'Center' 作为参考，并将小部件呈现在页面的中心

代码

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    title:"DynamicWidgetApp",
    home:DynamicWidgetApp(),

));

class DynamicWidgetApp extends StatefulWidget{
  @override
  DynamicWidgetAppState createState() => DynamicWidgetAppState();
  }

class  DynamicWidgetAppState extends State<DynamicWidgetApp>{
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Center(
     //Removing body:Center will change the reference
    // and render the widget at the start of the page 
        child: Column(
            mainAxisAlignment : MainAxisAlignment.center,
            crossAxisAlignment : CrossAxisAlignment.center,
            children: [
              Text("My Centered Widget"),
            ]
          ),
      ),
      floatingActionButton: FloatingActionButton(
        // onPressed: ,
        child : Icon(Icons.add),
      ),
      );
    }
  }

【讨论】：

不适合我。感谢分享。

【解决方案4】：

在使用 Column 时，在 column 小部件中使用它：

mainAxisAlignment: MainAxisAlignment.center

它将其子元素与其父元素的中心对齐空间是它的主轴，即垂直

或者，用 Center 小部件包装列：

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

如果它不能解决问题，请使用 Expanded 小部件包装父容器..

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

【讨论】：

【解决方案5】：

对我来说，问题是在我必须删除的列内展开了它并且它起作用了。

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

【讨论】：

【解决方案6】：

你可以使用。 mainAxisAlignment:MainAxisAlignment.center 这将使材料通过列中的中心。 `crossAxisAlignment: CrossAxisAlignment.center' 这将按行对齐居中的项目。

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

简单地使用。 Center ( Child: Column () ) 或使用 Padding 小部件说唱。并调整 Padding，使列子位于中心。

【讨论】：

这绝对是我一直在寻找的答案！！！所有以前的答案都会在 Col 的中心放置一个小部件，但 Col 本身不在中心！导致小部件没有真正居中..谢谢OP

【解决方案7】：

试试这个。它垂直和水平居中。

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

【讨论】：

【解决方案8】：

您可以使用 mainAxisAlignment 和 crossAxisAlignment 属性控制行或列如何对齐其子项。对于一行，主轴水平运行，交叉轴垂直运行。对于一列，主轴垂直运行，横轴水平运行。

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

【讨论】：

【解决方案9】：

对于列，使用：

mainAxisAlignment: MainAxisAlignment.center

它将其子元素垂直对齐其父空间的中心

【讨论】：

【解决方案10】：

试试：

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

【讨论】：

以前试过这个。它确实居中，但它不居中？
这是一个填充问题。现在可以正常使用了，谢谢！