Dart 底部将容器中的一些小部件居中放置
我想在容器的底部居中放置一个图像和按钮。。所以我使用了align并将其设置为bottomCenter。。但它不起作用 这是我的容器:经过一些更新后Dart 底部将容器中的一些小部件居中放置,dart,flutter,Dart,Flutter,我想在容器的底部居中放置一个图像和按钮。。所以我使用了align并将其设置为bottomCenter。。但它不起作用 这是我的容器:经过一些更新后 return new Container( height: MediaQuery.of(context).size.height, width: MediaQuery.of(context).size.width, decoration: new BoxDe
return new Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage(
globals.uiLabels['wthimg' + (index + 1).toString()]
[globals.currentLang]),
fit: BoxFit.cover,
),
),
child: Stack(
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.height/2 +100),
child: new Column(
children: <Widget>[
new Text(
globals.uiLabels[
'wthtitle' + (index + 1).toString()]
[globals.currentLang],
style: TextStyle(
fontSize: 18.0,
color: Colors.white,
fontWeight: ui.FontWeight.bold),
),],),),
new Padding(
padding:
EdgeInsets.only(top: 20, right: 10, left: 10),
child: new Column(
children: <Widget>[
new Text(
globals.uiLabels[
'wthdesc' + (index + 1).toString()]
[globals.currentLang],
softWrap: true,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16.0,
color: Colors.white,
),),],),),],),
Align(
child: Padding(
padding: EdgeInsets.only(top: 10),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 20.0),
child: new Image(
image: AssetImage(globals.uiLabels[
'wthpager' +
(index + 1).toString()]
[globals.currentLang]),
width: 70,
),
),
new RaisedButton(
shape: new RoundedRectangleBorder(
borderRadius:
new BorderRadius.circular(5.0)),
child: new Text(
globals.uiLabels['skip']
[globals.currentLang],
style: new TextStyle(
color: Colors.white, fontSize: 18.0),
),
color: Color(0x0049C275),
elevation: 0.0,
onPressed: () {
navigationPage();
},),],),),
alignment: Alignment.bottomCenter,
)],),);
返回新容器(
高度:MediaQuery.of(context).size.height,
宽度:MediaQuery.of(context).size.width,
装饰:新盒子装饰(
图片:新装饰图片(
图片:新资产时代(
globals.uiLabels['wthimg'+(索引+1).toString()]
[globals.currentLang]),
适合:BoxFit.cover,
),
),
子:堆栈(
儿童:[
纵队(
mainAxisSize:mainAxisSize.max,
儿童:[
新填料(
填充:仅限边缘设置(
顶部:MediaQuery.of(context.size.height/2+100),
子:新列(
儿童:[
新文本(
globals.ui标签[
'wthtitle'+(索引+1).toString()]
[globals.currentLang],
样式:TextStyle(
字体大小:18.0,
颜色:颜色,白色,
fontWeight:ui.fontWeight.bold),
),],),),
新填料(
衬垫:
仅限边缘设置(顶部:20,右侧:10,左侧:10),
子:新列(
儿童:[
新文本(
globals.ui标签[
'wthdesc'+(索引+1).toString()]
[globals.currentLang],
软包装:是的,
textAlign:textAlign.center,
样式:TextStyle(
字体大小:16.0,
颜色:颜色,白色,
),),],),),],),
对齐(
孩子:填充(
填充:仅限边缘设置(顶部:10),
子:列(
儿童:[
填充物(
填充:仅限边缘设置(顶部:20.0),
孩子:新形象(
图像:AssetImages(globals.ui)[
“wthpager”+
(索引+1).toString()]
[globals.currentLang]),
宽度:70,
),
),
新升起的按钮(
形状:新的RoundedRectangleBorder(
边界半径:
新边界半径。圆形(5.0)),
儿童:新文本(
globals.uiLabels['skip']
[globals.currentLang],
样式:新文本样式(
颜色:颜色。白色,字体大小:18.0),
),
颜色:颜色(0x0049C275),
标高:0.0,
已按下:(){
导航页面();
},),],),),
对齐:对齐.bottomCenter,
)],),);
我想说的是底部中间。。部件是否在align小部件中
尝试对齐、堆叠和行。。但是没有一个有效
如何解决这个问题?并使其始终位于底部中心
跳过并删除上面的图像。。我想把它们放在这一页的底部中间。。但现在它们位于顶部中心更新:
1-对于顶部填充,使用-100
而不是+100
。实际上,最好使用mainAxisAlignment:mainAxisAlignment.center,
2-删除不必要的列
3-在最后一列中设置mainAxisSize:mainAxisSize.min,
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.black45,
child: Stack(
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.height/2 - 100),
child: Text('this is the title',
style: TextStyle(
fontSize: 18.0,
color: Colors.white,
fontWeight: ui.FontWeight.bold),
),),
Padding(
padding:
EdgeInsets.only(top: 20, right: 10, left: 10),
child: Text('this is a description... ' * 3,
softWrap: true,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16.0,
color: Colors.white,
),),),],),
Align(
child: Padding(
padding: EdgeInsets.only(top: 10),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 20.0),
child: new Image(
image: AssetImage('assets/fav_list_full.png'),
width: 70,
),
),
new RaisedButton(
shape: new RoundedRectangleBorder(
borderRadius:
new BorderRadius.circular(5.0)),
child: new Text('skip',
style: new TextStyle(
color: Colors.white, fontSize: 18.0),
),
color: Color(0x0049C275),
elevation: 0.0,
onPressed: () {
navigationPage();
},),],),),
alignment: Alignment.bottomCenter,
)],),);
容器(
高度:MediaQuery.of(context).size.height,
宽度:MediaQuery.of(context).size.width,
颜色:颜色。黑色45,
子:堆栈(
儿童:[
纵队(
mainAxisSize:mainAxisSize.max,
儿童:[
填充物(
填充:仅限边缘设置(
顶部:MediaQuery.of(context.size.height/2-100),
child:Text('这是标题',
样式:TextStyle(
字体大小:18.0,
颜色:颜色,白色,
fontWeight:ui.fontWeight.bold),
),),
填充物(
衬垫:
仅限边缘设置(顶部:20,右侧:10,左侧:10),
child:Text('这是一个描述…'*3,
软包装:是的,
textAlign:textAlign.center,
样式:TextStyle(
字体大小:16.0,
颜色:颜色,白色,
),),),],),
对齐(
孩子:填充(
填充:仅限边缘设置(顶部:10),
子:列(
mainAxisSize:mainAxisSize.min,
儿童:[
填充物(
填充:仅限边缘设置(顶部:20.0),
孩子:新形象(
图片:AssetImage('assets/fav_list_full.png'),
宽度:70,
),
),
新升起的按钮(
形状:新的RoundedRectangleBorder(
边界半径:
新边界半径。圆形(5.0)),
子项:新文本('跳过',
样式:新文本样式(
颜色:
child: Container(
height: 300.0,
width: 300.0,
color: Colors.orange,
child: Stack(
children: <Widget>[
Column(
children: <Widget>[
Text("One", style: TextStyle(fontSize: 48.0),),
Text("Two", style: TextStyle(fontSize: 48.0),),
],
),
Align(
child: FlutterLogo(size: 48,),
alignment: Alignment.bottomCenter,
)
],
),
),