小部件不会在 Flutter 中进入屏幕底部?

本文介绍了小部件不会在 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'), ), ), ),