Question

我想将图像和按钮居中放置在容器的底部..所以我使用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,
                )],),);

我想让底部居中..是align小部件内的部分...

尝试对齐，堆栈和行..但没有一个...

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

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

Answer 1

已更新：

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

Answer 2

尝试使用以下代码：

已创建示例：

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

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

2 个答案: