我应该如何管理多个供应商和消费者

Question

我正在用river_pod库编写textfield代码，如下所示。当我点击每个suffixIcon时，它同时工作密码和密码确认字段，最后发现每个state只由单个提供者管理。并想知道我应该如何管理这个供应商和消费者，并有效地。

//main.dart
import 'package:cards/view/textfield.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(
    ProviderScope(
      child: MaterialApp(
        title: 'Cards Demo',
        home: RegisterWidget(),
      ),
    ),
  );
}

class RegisterWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
        body: Padding(
      padding: const EdgeInsetsDirectional.fromSTEB(20, 50, 20, 0),
      child: Column(
        children: [
          Container(
            width: double.infinity,
            height: 50,
            // color: Colors.grey,
            alignment: Alignment.topLeft,
            child: Image.asset('images/logo.png'),
          ),
          Container(
            padding: const EdgeInsetsDirectional.fromSTEB(10, 0, 10, 0),
            margin: const EdgeInsets.only(top: 30),
            width: double.infinity,
            // color: Colors.blue,
            child: Column(
              children: [
                const Align(
                  alignment: AlignmentDirectional(0, 0),
                  child: TextFieldCustom(
                    labelText: "email",
                    hintText: "type your email-adress",
                    suffixIcon: null,
                  ),
                ),
                Align(
                  alignment: const AlignmentDirectional(0, 0),
                  child: TextFieldCustom(
                      labelText: "password",
                      hintText: "set password",
                      suffixIcon: SuffixIconWidget()),
                ),
                Align(
                  alignment: const AlignmentDirectional(0, 0),
                  child: TextFieldCustom(
                      labelText: "password-confirm",
                      hintText: "password for confirmation",
                      suffixIcon: SuffixIconWidget()),
                ),
              ],
            ),
          ),
        ],
      ),
    ));
  }
}

//textfield.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

final mask = StateProvider<bool>((ref) => true);

class TextFieldCustom extends ConsumerWidget {
  const TextFieldCustom({required this.labelText, required this.hintText, this.suffixIcon, Key? key}): super(key: key);
  final String labelText;
  final String hintText;
  final Widget? suffixIcon;


  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Container(
        margin: const EdgeInsets.only(bottom: 10),
        child: TextFormField(
          style: const TextStyle(
            fontSize: 13,
          ),
          obscureText: ObscureTextFunction(suffixIcon, ref),
          decoration: InputDecoration(
            labelText: labelText, //**
            hintText: hintText, //**
            suffixIcon: suffixIcon, //**
            labelStyle: const TextStyle(
              fontSize: 15,
              color: Color.fromARGB(255, 219, 219, 219), 
            ),
            enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(2),
              borderSide: const BorderSide(
                color: Color.fromARGB(255, 219, 219, 219), 
                width: 1.0,
              ),
            ),
            focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(2),
                borderSide: const BorderSide(
                  color: Color.fromARGB(255, 219, 219, 219),
                  width: 1.0, //outlineの太さ
                )),
          ),
        ));
  }
}

bool ObscureTextFunction(suffixIcon, ref) {
  if (suffixIcon == null) {
    return false;
  } else {
    final bool isVisible = ref.watch(mask);
    return isVisible ? false : true;
  }
}

class SuffixIconWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final bool isVisible = ref.read(mask);
    return IconButton(
      icon: Icon(ref.watch(mask) // false
          ? FontAwesomeIcons.solidEye
          : FontAwesomeIcons.solidEyeSlash),
      onPressed: () {
        ref.read(mask.notifier).update((state) => !isVisible);
      },
    );
  }
}

附加代码

final mask = StateProvider<bool>((ref) => true);
final maskConfirm = StateProvider<bool>((ref) => true);

class SuffixIconWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final bool isVisible = ref.read(mask);

    return IconButton(
      icon: Icon(ref.watch(mask) // false
          ? FontAwesomeIcons.solidEye
          : FontAwesomeIcons.solidEyeSlash),
      onPressed: () {
        ref.read(mask.notifier).update((state) => !isVisible);
      },
    );
  }
}

class SuffixIconWidgetConfirm extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final bool isVisible = ref.read(maskConfirm);

    return IconButton(
      icon: Icon(ref.watch(maskConfirm) // false
          ? FontAwesomeIcons.solidEye
          : FontAwesomeIcons.solidEyeSlash),
      onPressed: () {
        ref.read(maskConfirm.notifier).update((state) => !isVisible);
      },
    );
  }
}

Answer 1

对于只对小部件很重要的本地状态，我建议您在TextFieldCustom中使用一个简单的布尔值，并使用setState进行更改。

但是，一般来说，要使这个小部件在Riverpod中正确地重用，您应该创建一个回调函数onIconPressed()。就像您正在传递labelText、suffixIcon等一样，您也可以像传递按钮一样传递函数。然后，对于一个提供程序处理两个小部件，它不应该是布尔提供程序，而应该是一个包含两个布尔值的对象。