颤振：垂直居中

如何在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),),
        ],
      ),
    ),
  );
}

Aziz提出的解决方案是：

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

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

padding: new EdgeInsets.all(25.0),

为了使中心列准确-至少在这种情况下-您需要删除填充。

尝试：

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

对于“列”，请使用：

mainAxisAlignment: MainAxisAlignment.center

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

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

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

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

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

另一个解决方案！

如果要以中央垂直形式设置小部件，则可以使用ListView。例如：我使用了三个按钮，并将它们添加到ListView内，随后是

收缩包装：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(),
  ));
}

输出：

对我来说，问题是在列中有一个Expanded，我必须删除它并且它起作用了。

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

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

mainAxisAlignment: MainAxisAlignment.center

它将其子项对齐其父项的中心。空间为其主轴，即垂直

或者，用“中心”小部件包装该列：

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

如果无法解决问题，请使用扩展小部件包装父容器。

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

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

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

只需使用。 Center ( Child: Column () ) 或使用Padding小部件说唱。并调整填充，使列子项位于中间。