问题描述
所以我试图让 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 中进入屏幕底部?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!