我是新来的颤振和想建立一个登录面具。我有两个子组件,一个包含输入字段,另一个包含登录按钮。
我试图在按下按钮时调用一个登录函数,并从那里的输入字段访问值。
我不确定我的问题的正确解决方案是什么,我尝试使用一个带有模型类的提供者,但是,当我运行应用程序并在输入字段中单击我的输入字段时,登录按钮就会消失。我也愿意接受完全不同的解决方案,如果它们在我的情况下更好的话。

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 - 从子组件访问值和函数-LMLPHP

关于flutter - 从子组件访问值和函数,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57489363/

10-11 01:16