颤振: 垂直中心柱

如何在颤振垂直中心柱？我使用了小部件“ new Center”。我已经使用了小部件“新中心”，但它不垂直中心我的专栏？任何想法都会有帮助。

@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),),
],
),
),
);
}
218588 次浏览
小开

试试:

Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children:children...)
小开
最佳答案

阿齐兹提出的解决办法是:

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

它不会在精确的中心，因为填充:

padding: EdgeInsets.all(25.0),

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

小开

另一个解决方案！

如果希望以中间垂直的形式设置小部件，可以使用 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(),
));
}

产出:

enter image description here

小开

使用:

mainAxisAlignment: MainAxisAlignment.center

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

小开

您可以使用 mainAxisAlign 和 cross AxisAlign 属性控制行或列的子元素的对齐方式。对于行，主轴水平运行，横轴垂直运行。对于列，主轴垂直运行，横轴水平运行。

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

试试这个，它的中心是垂直和水平的。

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

你可以用。 mainAxisAlignment:MainAxisAlignment.center 这将材料通过中心的柱明智。 “ CrossAxisAlignment.center” 这将使行中间的项目对齐。

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

简单使用。 Center ( Child: Column () ) 或用填充小部件敲击。并调整填充，使列子元素位于中心。

小开

对我来说，问题在于我必须移除的柱子里面有一个展开的部分，它起作用了。

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

在使用 Column 时，请在 Column 小部件中使用:

mainAxisAlignment: MainAxisAlignment.center

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

用 Center 小部件包装该列:

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

如果它不能解决这个问题，那么就用一个展开的小部件包装父容器。

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

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

在执行 Column is centered within the page body's 'Center Container'时，CrossAlignment.Center 使用页面正文的“ Center”作为参考，并在页面中心呈现小部件

enter image description here

密码

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

还可以通过 Align包装 Column小部件。

Align(
alignment: Alignment.center,
child: Column(
children: [
Container(
width: 300,
margin: const EdgeInsets.fromLTRB(0, 70, 0, 0),
child: TextFormField(decoration: const InputDecoration(hintText: "First Name"))
),
...
]
)
)

浏览这个网站可以找到不同的方法来集中一个小部件: 林克

小开

另外，如果你使用

MainAxisAlignment.start

为了使所有的孩子都居中，但是您仍然需要将其中一个孩子居中，只需在孩子上使用 Center ()小部件。


提交答案