Question

我有一个类似于以下屏幕截图的屏幕。它在屏幕中央有一个文本，在屏幕底部有一个按钮和文本，但是我都在屏幕中央。我在下面包括预期的设计，代码和结果。任何人，请帮助我。如何将文本放置在屏幕中央，其余部分放置在屏幕底部。

预期屏幕，

代码：

 body: new Container(
    decoration: new BoxDecoration(
      image: new DecorationImage(
        image: new AssetImage("assets/images/home_page_background.png"),
        fit: BoxFit.cover,
      ),
    ),
    child: new Container(
      child: new Column(
        // crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Container(
            // margin: new EdgeInsets.only(top: _MARGIN_JAHMAIKA),
            child: new Text(
              'JAHMAIKA',
              style: style72,
            ),
          ),
          new Container(
            // margin: new EdgeInsets.only(top: _MARGIN_BUTTON),
            child: new FlatButton(
                child: new Container(
                  padding: new EdgeInsets.only(
                      left: _PADDING_LARGE,
                      right: _PADDING_LARGE,
                      top: _PADDING_SMALL,
                      bottom: _PADDING_SMALL),
                  decoration: new BoxDecoration(
                    shape: BoxShape.rectangle,
                    borderRadius: new BorderRadius.all(
                        new Radius.elliptical(40.0, 50.0)),
                    border: new Border.all(
                      color: Colors.white,
                    ),
                  ),
                  child: new Text(
                    'Create an account',
                    style: style19,
                  ),
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    new MaterialPageRoute(
                        builder: (context) => new SignUpPage()),
                  );
                }),
          ),
          new Container(
            margin: new EdgeInsets.only(top: _MARGIN_SMALL),
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Container(
                  child: new Text(
                    'Already have an account?',
                    textAlign: TextAlign.center,
                    style: style15White,
                  ),
                ),
                new GestureDetector(
                  onTap: () {
                    Navigator.push(
                      context,
                      new MaterialPageRoute(
                          builder: (context) => new SignInPage()),
                    );
                  },
                  child: new Container(
                    margin: new EdgeInsets.only(left: _MARGIN_SMALL),
                    child: new Text('Login',
                        textAlign: TextAlign.center, style: style15Green),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  ),
);

结果：

Answer 1

您可以以其他方式在列内重新构造窗口小部件。您可以对所有必须与底部对齐的按钮使用列/容器，并将另一个小部件设置为“扩展”，这将占用剩余空间，将带有按钮的“行”推到屏幕底部。

窗口小部件无法在屏幕底部对齐

1 个答案: