flutter - ChangeNotifier - 如何动态更新或重建构造函数列表？

Question

下面是我的代码，大部分都按预期工作（请复制粘贴到 1 个 dart 页面中，然后运行）。

我有 3 个值的变量要显示（rankOne、rankTwo 和 rankThree）。我想根据用户的输入更改这些值。

我能够实现它，但我正在努力更新列表以在屏幕上显示新值。感谢您抽出宝贵时间帮助我解决或重新实施此问题。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) {
        return MyStore();
      },
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'ChangeNotifier Practice4',
        theme: ThemeData.dark(),
        home: TimeSheetPage(title: 'Time Sheet'),
      ),
    );
  }
}

class TimeSheet {
  int id;
  String name;
  double timeValue;
  TimeSheet({this.id, this.name, this.timeValue});
}

class MyStore extends ChangeNotifier {
  List<TimeSheet> _timeSheet = [];
  int _people = 3;
  double rankOne = 20.98;
  double rankTwo = 15.62;
  double rankThree = 10.43;

  MyStore() {
    _timeSheet = [
      TimeSheet(
        id: 0,
        name: "Task Type A",
        timeValue: rankOne,
      ),
      TimeSheet(
        id: 1,
        name: "Task Type B",
        timeValue: rankTwo,
      ),
      TimeSheet(
        id: 2,
        name: "Task Type C",
        timeValue: rankThree,
      ),
    ];
    notifyListeners();
  }

  List<TimeSheet> get timeSheet => _timeSheet;
  int get people => _people;

  setNumberOfPeople(peoples) {
    _people = peoples;
    switch (peoples) {
      case 0:
        double rankOne = 0.0;
        double rankTwo = 0.0;
        double rankThree = 0.0;
        print("setNumberOfPeople = 0");
        print('$rankOne, $rankTwo, $rankThree');
        notifyListeners();
        break;
      case 1:
        double rankOne = 15.98;
        double rankTwo = 13.21;
        double rankThree = 7.92;
        print("setNumberOfPeople = 1");
        print('$rankOne, $rankTwo, $rankThree');
        notifyListeners();
        break;
      case 2:
        double rankOne = 18.64;
        double rankTwo = 12.32;
        double rankThree = 8.76;
        print("setNumberOfPeople = 2");
        print('$rankOne, $rankTwo, $rankThree');
        notifyListeners();
        break;
      case 3:
        double rankOne = 20.98;
        double rankTwo = 15.62;
        double rankThree = 10.43;
        print("setNumberOfPeople = 3");
        print('$rankOne, $rankTwo, $rankThree');
        notifyListeners();
        break;
    }
  }
}

class TimeSheetPage extends StatefulWidget {
  TimeSheetPage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _TimeSheetPageState createState() => _TimeSheetPageState();
}

class _TimeSheetPageState extends State<TimeSheetPage> {
  List<int> peopleNumbers = [
    0,
    1,
    2,
    3,
  ];

  @override
  Widget build(BuildContext context) {
    var store = Provider.of<MyStore>(context);
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Column(
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Number of People: ',
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 18,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                DropdownButton<int>(
                  value: store.people,
                  onChanged: (int value) {
                    store.setNumberOfPeople(peopleNumbers[value]);
                  },
                  items: peopleNumbers.map((int num) {
                    return DropdownMenuItem<int>(
                      value: num,
                      child: Row(
                        children: <Widget>[
                          Icon(
                            Icons.people,
                          ),
                          SizedBox(
                            width: 10,
                          ),
                          Text(
                            num.toString(),
                            style: TextStyle(color: Colors.black),
                          ),
                        ],
                      ),
                    );
                  }).toList(),
                ),
              ],
            ),
            ListView.builder(
              shrinkWrap: true,
              itemCount: store.timeSheet.length,
              itemBuilder: (context, index) {
                return Container(
                  decoration: BoxDecoration(
                    border: Border(
                      top: BorderSide(
                        color: Colors.black,
                        width: 0.2,
                      ),
                      bottom: BorderSide(
                        color: Colors.black,
                        width: 0.2,
                      ),
                    ),
                  ),
                  child: ListTile(
                    title: Text(
                      store.timeSheet[index].name,
                    ),
                    trailing: Row(
                      mainAxisSize: MainAxisSize.min,
                      mainAxisAlignment: MainAxisAlignment.end,
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Icon(Icons.timer),
                        Text(
                          '${store.timeSheet[index].timeValue}',
                        ),
                      ],
                    ),
                    onTap: () {
                      print(store.timeSheet[index].timeValue);
                    },
                  ),
                );
              },
            ),
          ],
        ));
  }
}

标签： flutter

Answer 1

我刚刚更新了您的MyStoreChangeNotifier 模型。您需要_timeSheet使用新值更新 TimeSheet 类型的整个列表才能更新列表视图。

class MyStore extends ChangeNotifier {
  List<TimeSheet> _timeSheet = [];
  int _people = 3;
  double rankOne = 20.98;
  double rankTwo = 15.62;
  double rankThree = 10.43;

  MyStore() {
    _timeSheet = [
      TimeSheet(
        id: 0,
        name: "Task Type A",
        timeValue: rankOne,
      ),
      TimeSheet(
        id: 1,
        name: "Task Type B",
        timeValue: rankTwo,
      ),
      TimeSheet(
        id: 2,
        name: "Task Type C",
        timeValue: rankThree,
      ),
    ];
    notifyListeners();
  }

  List<TimeSheet> get timeSheet => _timeSheet;
  int get people => _people;

  List<TimeSheet> getProductsByCategory(String category) {
    this._timeSheet = [];
    for (TimeSheet u in this._timeSheet) {
      this._timeSheet.add(u);
    }
  }

  void updateRank(double rankOne, double rankTwo, double rankThree) {
    rankOne = rankOne;
    rankTwo = rankTwo;
    rankThree = rankThree;

    _timeSheet = [
      TimeSheet(
        id: 0,
        name: "Task Type A",
        timeValue: rankOne,
      ),
      TimeSheet(
        id: 1,
        name: "Task Type B",
        timeValue: rankTwo,
      ),
      TimeSheet(
        id: 2,
        name: "Task Type C",
        timeValue: rankThree,
      ),
    ];

    print('$rankOne, $rankTwo, $rankThree');
    notifyListeners();
  }

  void setNumberOfPeople(int people) {
    _people = people;
    switch (people) {
      case 0:
        updateRank(0.0, 0.0, 0.0);
        break;
      case 1:
        updateRank(15.98, 13.21, 7.92);
        break;
      case 2:
        updateRank(18.64, 12.32, 8.76);
        break;
      case 3:
        updateRank(20.98, 15.62, 10.43);
        break;
    }
  }
}