如何将容器放置在颤振的列中

Question

我是新手，我正在尝试将RaisedButton窗口小部件移动到屏幕的左下方。我在stackoverflow上尝试了几乎所有现有的解决方案，但没有一个起作用！！

上图是我要放置按钮的屏幕截图

这是我的代码，

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.black87,
      child: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              child: Text(
                "${divStuff()}",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 120.0,
                  fontFamily:
                      'PIXymbols', //PIXymbols Digit Clocks W90 Bd from onlinewebfonts.com
                ),
              ),
              alignment: Alignment.center,
            ),
            Container(
              child: RaisedButton(
                onPressed: _launchURL,
                child: new Text('Learn More'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

只需像这样使用Align小部件：

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.black87,
      child: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
          Text(
                "${divStuff()}",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 120.0,
                  fontFamily:
                      'PIXymbols', //PIXymbols Digit Clocks W90 Bd from onlinewebfonts.com
                ),
              ),
              alignment: Alignment.center,
            ),
            Align( //The align widget
            alignment : Alignment.bottomLeft, 
              child: RaisedButton(
                onPressed: _launchURL,
                child: new Text('Learn More'),
              ),
            ),
          ],
        ),
      ),
    );
  }
} 

Answer 2

您是否尝试过列的mainAxisAlignment：MainAxisAlignment.end属性？

Column(
minAxisAlignment:MainAxisAlignment.end
child:Container()
)

Answer 3

抛弃列小部件，并使用“堆栈”将主小部件居中，然后使用“对齐”小部件放置其余部件。

Material(
    color: Colors.black87,
    child: Stack(
      children: <Widget>[
        Center(
          child: Container(
            child: Text(
              "${divStuff()}",
              style: TextStyle(
                color: Colors.white,
                fontSize: 120.0,
                fontFamily: 'PIXymbols',
              ),
            ),
            alignment: Alignment.center,
          ),
        ),
        Align(
          alignment: Alignment.bottomLeft,
          child: Container(
            child: RaisedButton(
              onPressed: _launchURL,
              child: new Text('Learn More'),
            ),
          ),
        ),
      ],
    ),
  )

Answer 4

为什么您不将 Stack 小部件用于此类用例。

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.black87,
      child: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.center,
            child: Text(
              "${divStuff()}",
              style: TextStyle(
                color: Colors.white,
                fontSize: 120.0,
                fontFamily:
                'PIXymbols', //PIXymbols Digit Clocks W90 Bd from onlinewebfonts.com
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomLeft,
            child: RaisedButton(
              onPressed: _launchURL,
              child: new Text('Learn More'),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 5

尝试

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(home:Home()));
}
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text('demo')),
      body: Material(
        color: Colors.black87,
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(
                child: Container(
                  child: Text(
                    "1000",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 120.0,
                      fontFamily:
                      'PIXymbols', //PIXymbols Digit Clocks W90 Bd from onlinewebfonts.com
                    ),
                  ),
                  alignment: Alignment.center,
                ),
              ),
              Align(
                alignment: Alignment.bottomLeft,
                child: RaisedButton(
                  onPressed:(){},
                  child: new Text('Learn More'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}