我是新来的颤振和想建立一个登录面具。我有两个子组件,一个包含输入字段,另一个包含登录按钮。
我试图在按下按钮时调用一个登录函数,并从那里的输入字段访问值。
我不确定我的问题的正确解决方案是什么,我尝试使用一个带有模型类的提供者,但是,当我运行应用程序并在输入字段中单击我的输入字段时,登录按钮就会消失。我也愿意接受完全不同的解决方案,如果它们在我的情况下更好的话。
import 'package:flutter/material.dart';
class LoginModel extends ChangeNotifier {
final loginFieldController = TextEditingController();
void login() {
print(loginFieldController.value);
}
}
class LoginState extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: EdgeInsets.only(top: 15, right: 15, left: 15, bottom: 380),
child: Stack(children: <Widget>[
LoginContentWidget(),
LoginHeaderWidget(),
FloatingLoginButton(),
])));
}
}
class LoginHeaderWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(top: 15, left: 10, right: 10),
alignment: Alignment.topCenter,
child: Card(
color: Colors.lightBlue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 15,
child: IntrinsicHeight(
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Center(
child: Container(
alignment: Alignment.topCenter,
margin: EdgeInsets.only(
top: 10, bottom: 10, left: 40, right: 40),
child: Text(
'LOGIN',
style: TextStyle(
color: Colors.amberAccent,
fontWeight: FontWeight.w500,
fontSize: 45),
),
),
)
],
),
)),
);
}
}
class LoginContentWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() => LoginContentWidgetState();
}
class LoginContentWidgetState extends State<LoginContentWidget> {
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.only(top: 50),
child: Card(
elevation: 5,
child: Padding(
padding: EdgeInsets.only(left: 20, right: 20, top: 80, bottom: 70),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
TextFormField(
controller: LoginModel().loginFieldController,
decoration: InputDecoration(
contentPadding:
EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
hintText: 'Email'),
),
TextFormField(
obscureText: true,
decoration: InputDecoration(
focusColor: Colors.white,
fillColor: Colors.white,
contentPadding:
EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
hintText: 'Password'),
),
],
),
)),
);
}
}
class FloatingLoginButton extends StatefulWidget {
@override
State<StatefulWidget> createState() => FloatingLoginButtonState();
}
class FloatingLoginButtonState extends State<FloatingLoginButton> {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
ButtonBar(
alignment: MainAxisAlignment.end,
children: <Widget>[
FloatingActionButton.extended(
label: Text('Login'),
onPressed: LoginModel().login,
)
],
)
],
);
}
}
最佳答案
更改为此,添加singleChildScrollView并移动floatingLoginButton
class LoginState extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(top: 15, right: 15, left: 15, bottom: 380),
child: Stack(children: <Widget>[
LoginContentWidget(),
LoginHeaderWidget(),
// FloatingLoginButton(),
])),
)
,
floatingActionButton: FloatingLoginButton(),
)
;
}
}
编辑问题2
在所有类之外声明这个
var loginModel = LoginModel();
和改变
LoginModel().loginFieldController
到
controller: loginModel.loginFieldController,
也会改变
LoginModel().login
到
onPressed: loginModel.login,
关于flutter - 从子组件访问值和函数,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57489363/