Flutter中如何实现跨类传递String值 登录页邮箱密码多组件获取

核心实现思路 #

• 采用Flutter官方推荐的状态提升方案，将需要共享的邮箱、密码状态存放在两个子组件共同的父组件InputWrapper中
• 输入组件InputField通过回调将输入内容同步到父组件状态
• 按钮组件Button通过参数接收点击回调，由父组件统一处理登录逻辑，无需在按钮内部读取输入值

该方案完全满足组件拆分要求，不需要合并代码，各组件职责清晰，也无需引入额外的状态管理库。

具体代码修改 #

1. 修改InputField类 #

新增回调参数，用于把输入的邮箱、密码实时回传给父组件：

import 'package:flutter/material.dart';

class InputField extends StatefulWidget {
  // 新增两个回调参数
  final Function(String email) onEmailChanged;
  final Function(String password) onPasswordChanged;
  const InputField({
    Key? key,
    required this.onEmailChanged,
    required this.onPasswordChanged,
  }) : super(key: key);

  @override
  _InputFieldState createState() => _InputFieldState();
}

class _InputFieldState extends State<InputField> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
              border: Border(bottom: BorderSide(color: Color(4294638330)))),
          child: TextField(
            // 给邮箱输入框加值变化回调
            onChanged: (value) => widget.onEmailChanged(value),
            decoration: InputDecoration(
                hintText: "Enter your email",
                hintStyle: TextStyle(color: Colors.grey),
                border: InputBorder.none),
          ),
        ),
        Container(
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
              border: Border(bottom: BorderSide(color: Color(4294638330)))),
          child: TextField(
            onChanged: (value) => widget.onPasswordChanged(value),
            obscureText: true, // 建议加上密码隐藏属性
            decoration: InputDecoration(
                hintText: "Enter your password",
                hintStyle: TextStyle(color: Colors.grey),
                border: InputBorder.none),
          ),
        ),
      ],
    );
  }
}

2. 修改Button类 #

新增点击回调参数，仅保留按钮UI逻辑，业务逻辑交由父组件处理：

import 'package:flutter/material.dart';

class Button extends StatelessWidget {
  // 新增点击回调参数
  final VoidCallback onPressed;
  const Button({
    Key? key,
    required this.onPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50,
      margin: EdgeInsets.symmetric(horizontal: 50),
      decoration: BoxDecoration(
        color: Colors.cyan[500],
        borderRadius: BorderRadius.circular(10),
      ),
      child: Center(
        child: ElevatedButton(
          onPressed: onPressed,
          child: Text(
            "Accedi",
            style: TextStyle(
                color: Colors.white, fontSize: 15, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

3. 修改InputWrapper类 #

作为父组件统一管理状态，协调两个子组件的数据流：

import 'package:cleverpot/Helper/authelper.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

import 'Button.dart';
import 'InputField.dart';

class InputWrapper extends StatefulWidget {
  InputWrapper({Key? key}) : super(key: key);

  @override
  _InputWrapperState createState() => _InputWrapperState();
}

class _InputWrapperState extends State<InputWrapper> {
  String email = '';
  String password = '';
  final authHelper _helper = authHelper();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(30),
      child: Column(
        children: <Widget>[
          SizedBox(
            height: 20,
          ),
          Container(
            decoration: BoxDecoration(
                color: Colors.white, borderRadius: BorderRadius.circular(10)),
            // 接收输入组件回传的内容更新状态
            child: InputField(
              onEmailChanged: (value) => setState(() => email = value),
              onPasswordChanged: (value) => setState(() => password = value),
            ),
          ),
          SizedBox(
            height: 20,
          ),
          RichText(
              text: TextSpan(
                  text: "Password dimenticata?",
                  style: TextStyle(color: Colors.grey),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      print("Cliccato");
                    })),
          SizedBox(
            height: 20,
          ),
          // 给按钮传递点击回调，直接使用当前状态的邮箱密码处理业务
          Button(
            onPressed: () {
              print("输入的邮箱：$email，输入的密码：$password");
              // 直接调用登录逻辑即可
              _helper.signIn(email, password);
            },
          ),
          SizedBox(
            height: 20,
          ),
          Container(
            decoration: BoxDecoration(
                color: Colors.green[500],
                borderRadius: BorderRadius.circular(50)),
            child: RichText(
                text: TextSpan(
                    text: "Non sei registrato? Clicca qua",
                    style: TextStyle(color: Colors.black),
                    recognizer: TapGestureRecognizer()
                      ..onTap = () {
                        Navigator.of(context).push(PageRouteBuilder(
                            opaque: false,
                            pageBuilder: (BuildContext context, _, __) {
                              return Registration();
                            }));
                        print("Cliccato");
                      })),
          ),
        ],
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者franzi98