0

我正在尝试在颤动中实现一个动态列表视图，可以通过点击浮动肌动蛋白按钮来增加它。但是浮动操作按钮的 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 函数，它正在执行并在控制台中打印，但列表仅更新一次。

4

2 回答 2

0

尝试这个

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

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

于 2021-12-22T10:02:16.887 回答
0

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

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

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

于 2021-12-22T09:34:24.630 回答