小部件不会在 Flutter 中进入屏幕底部? [英] Widget not going to bottom of screen in Flutter?

问题描述

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

import 'package:flutter/material.dart';类 LoginSignupScreen 扩展 StatefulWidget {@覆盖_LoginSignupScreenState createState() =>_LoginSignupScreenState();}类 _LoginSignupScreenState 扩展状态<LoginSignupScreen>{//TRUE:注册页面，FALSE:登录页面布尔_注册=真；无效_changeScreen(){设置状态((){//将其设置为当前屏幕的反面_register = !_register;});}@覆盖小部件构建(BuildContext 上下文){返回容器(//     高度:，孩子:列(//mainAxisAlignment: MainAxisAlignment.start,孩子们:<小部件>[填充(填充:常量 EdgeInsets.all(20)，孩子:行(mainAxisAlignment: MainAxisAlignment.center,孩子们:<小部件>[按钮栏(孩子们:<小部件>[材质按钮(onPressed:_changeScreen，孩子:文本(注册")，),材质按钮(onPressed:_changeScreen，孩子:文本('登录')，),],),],),),填充(填充:EdgeInsets.all(20)，孩子:列(孩子们:<小部件>[文本域(装饰:输入装饰(边框:InputBorder.none，hintText:'E-MAIL')，),文本域(装饰:输入装饰(边框:InputBorder.none，提示文本:'用户名')，),文本域(装饰:输入装饰(边框:InputBorder.none，提示文本:'PASSWORD')，)],),),对齐(对齐方式:FractionalOffset.bottomCenter，孩子:材料按钮(onPressed: () =>{}，孩子:文本(_register?'REGISTER':'LOGIN')，),),],),);}}

解决方案

你将使用

So I'm trying to get the REGISTER button to align on the bottom center of the screen. I'm relatively new to Flutter and am wondering if there is a way to do this easily, or do I need to rewrite a lot of code? Here's what I have so far. As you can see, I put it in an Align(), but it only goes to the bottom center of the filled area. I think what I have to do is make the outside Container() the height of the entire screen, but I also don't know how to do this. If you have a way to do this, please let me know. Thanks.

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

解决方案

You will solve using Expanded widget.

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

这篇关于小部件不会在 Flutter 中进入屏幕底部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！