在中心的颤振位置堆栈小部件
我有一个堆栈中的小部件,所以我想将我的按钮栏放在堆栈的底部中心,但没有任何作用.小部件只是粘在左侧.这是我的代码.
new Positioned(
bottom: 40.0,
child: new Container(
margin: const EdgeInsets.all(16.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Align(
alignment: Alignment.bottomCenter,
child: new ButtonBar(
alignment: MainAxisAlignment.center,
children: <Widget>[
new OutlineButton(
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new LoginPage()));
},
child: new Text(
"Login",
style: new TextStyle(color: Colors.white),
),
),
new RaisedButton(
color: Colors.white,
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) =>
new RegistrationPage()));
},
child: new Text(
"Register",
style: new TextStyle(color: Colors.black),
),
)
],
),
)
],
),
),
)
我确实尝试了每个中心对齐,请帮忙
Sun*_*tam 151
可能是最优雅的方式。
您可以简单地使用中alignment存在的选项Stack
child: Stack(
alignment: Alignment.center
)
- 确实，这是最优雅的方式。 (12认同)
- 工作完美，不会像 Positioned.fill 那样拉伸内容 (10认同)
- 这应该是公认的答案！ (4认同)
- 最佳答案 ！！！干得好！ (4认同)
- 迄今为止最好的答案！也许是因为这个功能最近已添加到 Stack 小部件中 (4认同)
- 但是，当堆栈中有多个子项并且您只希望其中一个位于中心时该怎么办呢？ (3认同)
Ami*_*ash 37
对于到达这里但无法解决他们的问题的任何人，我曾经通过将左右都设置为 0 来使我的小部件水平居中，如下所示：
Stack(
children: <Widget>[
Positioned(
top: 100,
left: 0,
right: 0,
child: Text("Search",
style: TextStyle(
color: Color(0xff757575),
fontWeight: FontWeight.w700,
fontFamily: "Roboto",
fontStyle: FontStyle.normal,
fontSize: 56.0,
),
textAlign: TextAlign.center,
),
),
]
)
- Web 中常用的一种做法。 (3认同)
- 不..它只是让它占据整个宽度 (2认同)
You*_*lid 30
您可以在堆栈中使用Positioned.fill和Align：
Stack(
children: <Widget>[
Positioned.fill(
child: Align(
alignment: Alignment.centerRight,
child: ....
),
),
],
),
- @JoãoAbrantes 当调用 Positioned.fill() 时，您将获得完整尺寸（它将填充视图），然后 Align 可以在其中执行任何它想要的操作。如果将对齐替换为红色背景的容器，则堆栈将变为全红色。 (13认同)
cre*_*not 18
删除所有内容,但是:
Align(
alignment: Alignment.bottomCenter,
child: new ButtonBar(
alignment: MainAxisAlignment.center,
children: <Widget>[
new OutlineButton(
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new LoginPage()));
},
child: new Text(
"Login",
style: new TextStyle(color: Colors.white),
),
),
new RaisedButton(
color: Colors.white,
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) =>
new RegistrationPage()));
},
child: new Text(
"Register",
style: new TextStyle(color: Colors.black),
),
)
],
),
)
在我的理论中,额外的Container是破坏它.我建议你通过添加填充来包围它:
Padding(
padding: EgdeInsets.only(bottom: 20.0),
child: Align...
),
这对我来说似乎比我更合理,Positioned而且我也不太了解你Column只和一个孩子在一起.
Par*_*iya 15
AStack允许您将元素堆叠在一起，数组中的最后一个元素具有最高优先级。您可以使用Align、Positioned或Container来定位堆栈的子项。
对齐
通过设置对齐方式来移动小部件Alignment，它具有静态属性，如topCenter、bottomRight 等。或者您可以完全控制并设置Alignment(1.0, -1.0)，它采用从 1.0 到 -1.0 的 x,y 值，其中 (0,0) 是屏幕的中心。
Stack(
children: [
Align(
alignment: Alignment.topCenter,
child: Container(
height: 80,
width: 80, color: Colors.blueAccent
),
),
Align(
alignment: Alignment.center,
child: Container(
height: 80,
width: 80, color: Colors.deepPurple
),
),
Container(
alignment: Alignment.bottomCenter,
// alignment: Alignment(1.0, -1.0),
child: Container(
height: 80,
width: 80, color: Colors.amber
),
)
]
)
Tab*_*aba 13
感谢以上所有答案，我想分享一些在某些情况下可能派上用场的东西。所以让我们看看当你使用时会发生什么Positioned:( right: 0.0, left:0.0, bottom:0.0) ：
Padding(
padding: const EdgeInsets.all(4.0),
child: Stack(
children: <Widget>[
Positioned(
bottom: 0.0,
right: 0.0,
left: 0.0,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Container(
color: Colors.blue,
child: Center(
child: Text('Hello',
style: TextStyle(color: Color(0xffF6C37F),
fontSize: 46, fontWeight: FontWeight.bold),),
)
),
)
),
],
),
),
这将是上述代码的输出：
如您所见，它会用容器填充整个宽度，即使您不想要它并且您只希望容器包装其子项。因此，您可以尝试以下技巧：
Padding(
padding: const EdgeInsets.all(4.0),
child: Stack(
children: <Widget>[
Positioned(
bottom: 0.0,
right: 0.0,
left: 0.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Container(
color: Colors.blue,
child: Text('Hello',
style: TextStyle(color: Color(0xffF6C37F),
fontSize: 46, fontWeight: FontWeight.bold),)
),
),
Container(),
],
)
),
],
),
),
您可以在堆栈内更改 Positioned with Align：
Align(
alignment: Alignment.bottomCenter,
child: ... ,
),
有关堆栈的更多信息：探索堆栈
问题是容器的尺寸要最小。
只需给width:Container一个（红色），就可以完成。
width: MediaQuery.of(context).size.width
new Positioned(
bottom: 0.0,
child: new Container(
width: MediaQuery.of(context).size.width,
color: Colors.red,
margin: const EdgeInsets.all(0.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Align(
alignment: Alignment.bottomCenter,
child: new ButtonBar(
alignment: MainAxisAlignment.center,
children: <Widget>[
new OutlineButton(
onPressed: null,
child: new Text(
"Login",
style: new TextStyle(color: Colors.white),
),
),
new RaisedButton(
color: Colors.white,
onPressed: null,
child: new Text(
"Register",
style: new TextStyle(color: Colors.black),
),
)
],
),
)
],
),
),
),
| 归档时间： |
|
| 查看次数： |
30207 次 |
| 最近记录： |