dart - 底部居中容器中的一些小部件

我想将图像和按钮居中放置在容器的底部..所以我使用align并将其设置为bottomCenter ..但它不起作用!

这是我的容器:在某些更新之后

           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,
                )],),);

而我想底部居中..是对齐小部件内的部分...

尝试对齐，堆栈和行..但没有奏效...

如何解决呢？并使其始终居中居中...



跳过上方的图像..我希望它们位于页面的底部中心..但现在它们位于页面的顶部中心

最佳答案

更新:

1-对于顶部填充，请使用- 100而不是+100。实际上，最好使用mainAxisAlignment: MainAxisAlignment.center,代替

2-删除不必要的Column
3-在最后一个Column中设置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,
      )],),);

关于dart - 底部居中容器中的一些小部件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53319806/