小部件不会在 Flutter 中到达屏幕底部？

Question

所以我试图让注册按钮与屏幕的底部中心对齐。我对 Flutter 比较陌生，想知道是否有办法轻松做到这一点，或者我是否需要重写很多代码？这是我到目前为止所拥有的。如您所见，我将它放在 Align() 中，但它只会到达填充区域的底部中心。我想我要做的是让外面的 Container() 成为整个屏幕的高度，但我也不知道该怎么做。如果你有办法做到这一点，请告诉我。谢谢

import 'package:flutter/material.dart';

class LoginSignupScreen extends StatefulWidget {
  @override
  _LoginSignupScreenState createState() => _LoginSignupScreenState();
}

class _LoginSignupScreenState extends State<LoginSignupScreen> {
  // TRUE: register page, FALSE: login page
  bool _register = true;

  void _changeScreen() {
    setState(() {
      // sets it to the opposite of the current screen
      _register = !_register;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
//      height:,
      child: Column(
//      mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(20),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                ButtonBar(
                  children: <Widget>[
                    MaterialButton(
                      onPressed: _changeScreen,
                      child: Text('REGISTER'),
                    ),
                    MaterialButton(
                      onPressed: _changeScreen,
                      child: Text('LOGIN'),
                    ),
                  ],
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.all(20),
            child: Column(
              children: <Widget>[
                TextField(
                  decoration: InputDecoration(
                      border: InputBorder.none, hintText: 'E-MAIL'),
                ),
                TextField(
                  decoration: InputDecoration(
                      border: InputBorder.none, hintText: 'USERNAME'),
                ),
                TextField(
                  decoration: InputDecoration(
                      border: InputBorder.none, hintText: 'PASSWORD'),
                )
              ],
            ),
          ),
          Align(
            alignment: FractionalOffset.bottomCenter,
            child: MaterialButton(
              onPressed: () => {},
              child: Text(_register ? 'REGISTER' : 'LOGIN'),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

试试这个：

import 'package:flutter/material.dart';

class LoginSignupScreen extends StatefulWidget {
  @override
  _LoginSignupScreenState createState() => _LoginSignupScreenState();
}

class _LoginSignupScreenState extends State<LoginSignupScreen> {
  // TRUE: register page, FALSE: login page
  bool _register = true;

  void _changeScreen() {
    setState(() {
      // sets it to the opposite of the current screen
      _register = !_register;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
//      height:,
        child: Column(
//      mainAxisAlignment: MainAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(20),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  ButtonBar(
                    children: <Widget>[
                      MaterialButton(
                        onPressed: _changeScreen,
                        child: Text('REGISTER'),
                      ),
                      MaterialButton(
                        onPressed: _changeScreen,
                        child: Text('LOGIN'),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Padding(
              padding: EdgeInsets.all(20),
              child: Column(
                children: <Widget>[
                  TextField(
                    decoration: InputDecoration(
                        border: InputBorder.none, hintText: 'E-MAIL'),
                  ),
                  TextField(
                    decoration: InputDecoration(
                        border: InputBorder.none, hintText: 'USERNAME'),
                  ),
                  TextField(
                    decoration: InputDecoration(
                        border: InputBorder.none, hintText: 'PASSWORD'),
                  )
                ],
              ),
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                MaterialButton(
                  onPressed: () => {},
                  child: Text(_register ? 'REGISTER' : 'LOGIN'),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

Answer 2

您可以设置 Container 高度以覆盖您提到的整个屏幕，然后将 Align 小部件包裹在 Expanded 小部件内，这将填充可用的 space.

试试这个代码：

Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      child: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(20),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                ButtonBar(
                  children: <Widget>[
                    MaterialButton(
                      onPressed: _changeScreen,
                      child: Text('REGISTER'),
                    ),
                    MaterialButton(
                      onPressed: _changeScreen,
                      child: Text('LOGIN'),
                    ),
                  ],
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.all(20),
            child: Column(
              children: <Widget>[
                TextField(
                  decoration: InputDecoration(
                      border: InputBorder.none, hintText: 'E-MAIL'),
                ),
                TextField(
                  decoration: InputDecoration(
                      border: InputBorder.none, hintText: 'USERNAME'),
                ),
                TextField(
                  decoration: InputDecoration(
                      border: InputBorder.none, hintText: 'PASSWORD'),
                )
              ],
            ),
          ),
          Expanded(
            child: Align(
              alignment: Alignment.bottomCenter,
              child: MaterialButton(
                onPressed: () => {},
                child: Text(_register ? 'REGISTER' : 'LOGIN'),
              ),
            ),
          )
        ],
      ),
    );
  }

Answer 3

您将使用 Expanded 小部件解决问题。

        Expanded(
          child: Align(
            alignment: FractionalOffset.bottomCenter,
            child: MaterialButton(
              onPressed: () => {},
              child: Text(_register ? 'REGISTER' : 'LOGIN'),
            ),
          ),
        ),

Answer 4

有一个更简单的方法：

return Scaffold(     
  bottomNavigationBar: BottomAppBar(
    color: Colors.transparent,
    child: Text('bottom screen widget'),
    elevation: 0,
  ),
  body: Text('body')
  );

Answer 5

还有另一种解决方法：

children : [
           ///1
           Button(),

           Expanded(child:Container()),

           ///2
           Button(),
           ]

逻辑：展开的容器将吸收两个按钮之间的中间 space，第二个按钮将通过该按钮放置在屏幕底部。

Answer 6

我需要在我的抽屉中执行此操作，我设法通过添加中心来完成，然后通过设置 alignment: Alignment.bottomCenter 对齐小部件。代码如下所示：

      drawer: Drawer(
        child: Center(
          child: Align(
            alignment: Alignment.bottomCenter,
            child: RaisedButton(
              child: const Text('Logout', style: TextStyle(fontSize: 20)),
              onPressed: () async {
                await _auth.signOutUser();
                Navigator.of(context).pushReplacement(
                    MaterialPageRoute(builder: (context) => LoginScreen()));
              },
            ),
          ),
        ),
      ),

Answer 7

用 Expanded 小部件包裹所有小部件，不包括最后一个小部件，Expanded 小部件基本上占用最大可用空间 space。看看下面的例子你就知道了

代码：

Column(
        children: [
          Expanded(
            child: Container(
              color: Colors.grey,
            ),
          ),
          /// Below container will go to bottom
          ElevatedButton(
            onPressed: (){},
            child: Text('Click'),

          )
        ],
      ),

输出：

小部件不会在 Flutter 中到达屏幕底部？

Widget not going to bottom of screen in Flutter?

dart

flutter

flutter-layout