Question

我在我的 Flutter 应用中使用了 Provider。我能够用另一个小部件更改一个小部件，而无需使用设置状态。太棒了！

我的特点是，当我点击“Añadir al carrito”按钮时，购物车上的数字会发生变化，并逐一增加。

这是我放在按钮中的代码部分，它位于使用 provider.of 的脚手架主体内部：


    final _numCompras = Provider.of<MyShoppingCart>(context);
    return Padding(
      padding: const EdgeInsets.only(top: 15.0),
      child: GestureDetector(
        onTap: () {
          _numCompras.numCompras = _numCompras.numCompras + 1;
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
            content: const Text('Producto Añadido'),
            duration: const Duration(seconds: 1),
            action: SnackBarAction(
              label: '',
              onPressed: () {

              },
            ),
          ));
        },
        child: Container(
          height: 80,
          width: double.infinity,
          decoration: BoxDecoration(
            color: Constants.kColorRojo,
            borderRadius: BorderRadius.circular(60),
            border: Border.all(width: 1, color: Colors.black),
          ),
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Añadir al Carrito',
                  style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'Poppins',
                    fontSize: 20,
                  ),
                ),
                SizedBox(
                  width: 15,
                ),
                Icon(
                  Icons.shopping_cart_outlined,
                  color: Colors.white,
                  size: 30,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

这是我使用 ChangeNotifier 的类

  int _numCompras = 0;

  get numCompras => _numCompras;
  set numCompras(int newValue) {
    _numCompras = newValue;
    notifyListeners();
  }
}

在我的 main.dart 中，我放置了 ChangeNotifierProvider，因为我认为它包含所有其余的小部件。

class JuniorsApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<MyShoppingCart>(
          create: (context) => MyShoppingCart(),
          //builder: ,
        )
      ],
      child: MaterialApp(
        theme: ThemeData.light().copyWith(
          primaryColor: Color(0xFFd51921),
          scaffoldBackgroundColor: Color(0xFFf2f2f2),
        ),
        home: PageStart(),
        initialRoute: PageStart().ID_PageStart,
        routes: {
          page_IniciarSesion().ID_PageIniciarSesion: (context) =>
              page_IniciarSesion(),
          PageStart().ID_PageStart: (context) => PageStart(),
          RegistroNombrePage().ID_PageRegistroNombre: (context) =>
              RegistroNombrePage()
        },
        debugShowCheckedModeBanner: false,
      ),
    );
  }
}

最后是我要更改的小部件的 appBar 代码：

Widget build(BuildContext context) {
    bool _hasBackButton = hasBackArrow ?? true;
    final height = MediaQuery.of(context).size.height;
    final width = MediaQuery.of(context).size.width;
    return Selector<MyShoppingCart,int>(
      selector: (_, model) => model.numCompras,
      builder: (context, numCompras, _) {
        return SafeArea(
          child: Material(
            elevation: 15,
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 16),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  if (_hasBackButton)
                    RoundedIconButton(
                      iconData: Icons.arrow_back_ios,
                      press: () {
                        Navigator.pop(context, MaterialPageRoute(
                          builder: (context) {
                            return Selector(builder: (context, numCompras, _){}, selector: (_, model) => model.numCompras);
                          },
                        )
                        );
                      }
                    ),
                  Text(
                    this.title == null ? 'Junior \'s Tacos' : this.title,
                    style: Constants.kFuenteAppBar,
                  ),
                  this.hasCart
                      ? _widgetShoppingCar(context, height, width, numCompras)
                      : Spacer() ,
                ],
              ),
            ),
          ),
        );
      },
    );
  }
Widget _widgetShoppingCar(context, height, width, _numCompras) {
    return Stack(
      children: [
        RoundedIconButton(
          iconData: Icons.shopping_cart_outlined,
          press: () {
            _viewShop = !_viewShop;
            this.changeAppBarShop(_viewShop);
            /*Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => CartPage(),
              ),
            );*/
          },
        ),
        Positioned(
          bottom: height * 0.04,
          left: width * 0.09,
          child: Container(
            width: width * 0.05,
            height: height * 0.025,
            decoration: BoxDecoration(
                color: Colors.red[500],
                border: Border.all(
                  color: Colors.red[500],
                ),
                borderRadius: BorderRadius.all(Radius.circular(20))),
            child: Center(
                child: Text(
              '${_numCompras}',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            )),
          ),
        )
      ],
    );
  }

问题是它工作正常，但是当我从 appBar 执行 Navigator.pop 时。购物车的计数归零。

Here is how its working at the moment

有人可以给我一个提示吗？

谢谢！

Answer 1

好吧，如果有人遇到这种问题。我的问题是我有两个 ChangeNotifierProvider。一个在我的 main.dart 中，另一个在包含按钮的小部件中。我删除了最后一个，现在它可以工作了。

在flutter中在不同屏幕和appBar之间使用provider

1 个答案: