ListView 中的有狀態小部件未更新

Question

我有所有交易的列表_deals和選定交易的列表_selectedDeals 。 交易可以添加到另一個 class 的_selectedDeals列表中或從列表中刪除。因此，如果添加/刪除新交易，我想重建此DealsWidget ，以便新添加/刪除的交易正確反映在 UI 中。

我正在使用BookButton有狀態小部件，以顯示是否選擇了交易。 當isBooked為真時，表示已選擇交易。

我計划通過在從另一個 class 添加/刪除數據后調用DealsWidget的refresh() function 來實現此行為，這樣它將重建所有內容並且我的 UI 與數據一致，但沒有任何反應。

我發現重建不會再次重新創建BookButton小部件。 他們的構造函數不再被調用。 這就是為什么我的更新值沒有得到接受，因為我將它們傳遞給BookButton的構造函數。

任何人都可以解釋為什么會發生這種情況以及我如何正確顯示選擇了哪些交易而沒有選擇哪些交易？

交易小部件

class DealsWidget extends StatefulWidget {

  final List<Deal> _deals;
  final List<Deal> _selectedDeals;

  final DealSelectionListener _dealSelectionListener;

  DealsWidget(
    Key dealsKey,
    this._deals,
    this._selectedDeals,
    this._dealSelectionListener,
  ) : super(key: dealsKey);

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

class DealsWidgetState extends State<DealsWidget> {

  @override
  Widget build(BuildContext context) {

    final totalDeals = widget._deals.length;

    return ListView.builder(
      physics: NeverScrollableScrollPhysics(),
      itemCount: totalDeals,
      shrinkWrap: true,
      itemBuilder: (context, index) {

        final deal = widget._deals[index];
        final isSelected = widget._selectedDeals.contains(deal);
        
        return Container(
          color: Colors.white,
          padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
          child: BookButton(
            isSelected,
            (isBooked) {
              if (isBooked) {
                widget._dealSelectionListener._onSelected(deal);
              } else {
                widget._dealSelectionListener._onDeselected(deal);
              }
            }
          ),
        );
      }
    );
  }

  void refresh() {

    print('Refreshing deals');

    setState(() {
      
    });
  }
}

圖書按鈕

class BookButton extends StatefulWidget {

  final bool isBooked;
  final OnBookChangedListener listener;

  BookButton(this.isBooked, this.listener);

  @override
  BookButtonClass createState() => BookButtonClass(isBooked);
}
  
class BookButtonClass extends State<BookButton> {

  bool isBooked;

  BookButtonClass(this.isBooked);

  void check(bool check) {
    setState(() {
      isBooked = check;
      widget.listener.call(isBooked);
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return FlatButton(
      onPressed: (){
        setState(() {
          isBooked = !isBooked;
          widget.listener.call(isBooked);
        });
      },
      child: Text(
        isBooked ? AppStrings.unbook.toUpperCase() : AppStrings.book.toUpperCase(),
        style: TextStyle(
          color: isBooked ? AppColors.accentColor : Colors.white,
          fontSize: 12,
        ),
      ),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(5),
        side: BorderSide(
          color: AppColors.accentColor,
          width: isBooked ? 1 : 0,
        )
      ),
      color: isBooked ? Colors.transparent : AppColors.accentColor,
    );
  }
}

Answer 1

在這種情況下，您應該使用 Provider，因為小部件需要知道何時重建。

或者，如果您認為 Provider 現在很難學習，請嘗試在事件 ClickButton 上使用 SetState()，這應該可以解決

看看我在我的案例中做了什么

所以在我的 class 和數據中，我使用了 change changeNotifier

class PartnerControler extends ChangeNotifier {
....
changeNotifiers()
}

在顯示 class 中我使用了這個

ChangeNotifierProvider(
                  create: (context) => partnerControler,
                  child: buildPartnerList(context),
                ),

 Widget buildPartnerList(BuildContext context) {
return Column(
      children: <Widget>[
Consumer<PartnerControler>(
          builder: (context, partnercontroler, child) {
return (Expanded(
              child: ListView.builder(
itemCount: partnerControler.partnerListFiltered.length,
..