颤动(Flutter) : 试图在列中将项目置于底部中心位置，但它始终保持左对齐

我试图在 Column 的底部将一个小部件置于中间，但它始终向左对齐。

return new Column(
new Stack(
new Positioned(
bottom: 0.0,
new Center(
new Container(),
),
),
),
);

定位的存在迫使容器向左，而不是居中。然而，删除“定位”将容器置于中间位置。

225804 次浏览
小开

1) You can use an Align widget, with FractionalOffset.bottomCenter.

2) You can also set left: 0.0 and right: 0.0 in the Positioned.

小开
最佳答案

Align is the way to go if you have only one child.

If you have more, consider doing something like this:

return new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
// Your elements here
],
);
小开

I have used this approach,

What i want is, A layout always in bottom but whenever Keyboard pops-up that layout also comes over it

enter image description here

body: Container(
color: Colors.amber,
height: double.maxFinite,
child: new Stack(
//alignment:new Alignment(x, y)
children: <Widget>[
new Positioned(
child: myWidget(context, data.iconName, Colors.red),
),
new Positioned(
child: new Align(
alignment: FractionalOffset.bottomCenter,
child: myWidget(context, data.iconName, Colors.green)
),
)
],
),
),
小开

Wrap your Container in SingleChildScrollView() widget. Then it will not come above when keyboard pops up.

小开 
Expanded(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: Padding(
padding: EdgeInsets.only(bottom: 10.0),
child: //Your widget here,
),
),
),
小开

Just expanding the answers:

  • Spacer is an option no one mentioned yet; it is used in case you prefer not to use Positioned / Align.
  • Align works if you want to specify the alignment of a child inside a parent. Use it anywhere but directly inside Stack
  • Positioned is similar to Align, but works only under Stack directly.
小开

If you wish to leave content as it, can wrap it with scrollable.

Useful if you have inputs in the children:

enter image description here

    return Stack(
children: <Widget>[
Positioned(
child: SingleChildScrollView(
child: Column(
children: children
..add(Container(
height: 56, // button heigh, so could scroll underlapping area
)))),
),
Positioned(
child: Align(
alignment: Alignment.bottomCenter,
child: button,
),
)
],
);
小开

The easiest and the correct way to do it - use Spacer()

Example:

Column(
children: [
SomeWidgetOnTheTop(),
Spacer(),
SomeCenterredBottomWidget(),
],
);
小开

In addition of Stack: to avoid floating container on keyboard, use this

return Scaffold(
appBar: getAppBar(title),
resizeToAvoidBottomInset: false,
body:
小开 
Widget _bottom() {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
child: Container(
color: Colors.amberAccent,
width: double.infinity,
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: new List<int>.generate(50, (index) => index + 1)
.map((item) {
return Text(
item.toString(),
style: TextStyle(fontSize: 20),
);
}).toList(),
),
),
),
),
Container(
color: Colors.blue,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'BoTToM',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 33),
),
],
),
),
],
);
}
小开

Design everything using Expanded() is one of the easiest way to do thisenter image description here

Column(
children: [
Expanded(
child: Placeholder(),
flex: 1,
),
Expanded(
child:  Placeholder(),
flex: 10,
),
Expanded(
flex: 2,
child: Placeholder(),
)
],
),

提交答案