在 Bloc 中使用浮动操作按钮时出现问题答案

【问题标题】：Problem while using floating action button in Bloc在 Bloc 中使用浮动操作按钮时出现问题
【发布时间】：2022-01-23 13:04:12
【问题描述】：

我正在尝试在颤动中实现一个动态列表视图，可以通过点击浮动肌动蛋白按钮来增加它。但是浮动操作按钮的onPressed中的方法只更新了一次。

下面是我的 UI 和颤振块代码：-

import 'package:demo/bloc/main/demo_bloc.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Demo",
      home: DemoApp(),
    );
  }
}

class DemoApp extends StatelessWidget {
  const DemoApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      lazy: false,
      create: (context)=>DemoBloc([54,4,598,984,654,87,5,897,65,46,84,65,4984,]),
      child: Scaffold(
        appBar: AppBar(
          title: Text("Demo"),
        ),
        body: NumberList(),
        floatingActionButton: BlocBuilder<DemoBloc, List<int>>(
          builder: (context, state){
            return FloatingActionButton(
              onPressed: (){
                BlocProvider.of<DemoBloc>(context).addItem(12);
              }
            );
          },
        ),
      ),
    );
  }
}

class NumberList extends StatelessWidget {
  const NumberList({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<DemoBloc, List<int>>(builder: (context, state) {
          return ListView.builder(
              itemCount: BlocProvider.of<DemoBloc>(context).state.length,
              itemBuilder: (context, index) {
                return Text(
                    BlocProvider.of<DemoBloc>(context).state[index].toString()
                );
              });
        });
  }
}

import 'package:flutter_bloc/flutter_bloc.dart';

class DemoBloc extends Cubit<List<int>>{
  DemoBloc(List<int> initialState) : super(initialState);

  addItem(int value){
    print("adding item to the numbers list");
    state.add(value);
    emit(state);
  }

  removeItem(){
    state.removeLast();
    emit(state);
  }

  removeItemFrom(int index){
    state.removeAt(index);
    emit(state);
  }

}

我在 addItem() 函数中使用 print 函数，它正在控制台中执行和打印，但列表只更新一次。

【问题讨论】：

标签： flutter dart bloc cubit

【解决方案1】：

您BlocProvider 需要在小部件层次结构中处于较高位置。现在，每次调用 build 函数时都会创建一个新的 BloC。这将消除您所做的任何更改，因为每次更改都会触发构建，并且每次构建都会将您的状态重置为开始。

您的BlocProvider 需要在任何构建函数之外。在任何情况下，您都不想因为重建而重置数据。

您可以将它作为根小部件放在 main 方法中，并使您的应用成为子小部件。

【讨论】：

runApp() 函数内部？
是的，完全正确。在 runApp 函数中，您的应用（通常是 runApp 函数的参数）作为子级。

【解决方案2】：

试试这个

  addItem(int value) {
    print("adding item to the numbers list");
    final newList = [...state];
    newList.add(value);
    emit(newList);
  }

问题是你第一次发出的列表实际上是同一个对象。因此，您需要将列表克隆到全新的列表中。使用不可变对象作为块状态更容易。您可以将 freezed 包用于类，将 kt_dart 或 built_collection 用于集合数据类型。对于不可变数据类型，您必须创建新对象而不是改变现有对象，这样 bloc 才能知道它是一种新状态。

【讨论】：

我在两个答案中都尝试了这两种方法，但对我没有任何效果，问题仍然存在。