Question

所以我试图使REGISTER按钮在屏幕的底部中央对齐。我对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

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

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

Answer 2

还有另一种解决方法：

children : [
           ///1
           Button(),

           Expanded(child:Container()),

           ///2
           Button(),
           ]

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

Answer 3

尝试一下：

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 4

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

尝试以下代码：

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 5

有一种更简单的方法：

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

Answer 6

我需要在我的 Drawer 中执行此操作，我设法通过添加 Center 然后通过设置 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()));
              },
            ),
          ),
        ),
      ),

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

6 个答案: