繁体   English   中英

如何通过 Flutter Provider 创建和更新 Dynamic Widgets 的值

[英]How to create and update the value of Dynamic Widgets through Flutter Provider

所以我正在实施如下所示的内容:

class TempProvider extends ChangeNotifier(){
    List<Widget> _list = <Widget>[];
    List<Widget get list => _list;
    int _count = 0;
    int get count => _count;

    Future<List<Widget>> getList() async{
        addToList(Text('$count'));

        List _result = await db....
        _result.forEach((_item){
            addToList(Button(
                onTap: () => increment();
                child: Text('Press'),
            ));
        });
    }

    addToList(Widget widget){
        _list.add(widget);
        notifyListeners();
    }

    increment(){
        _count += 1;
        notifyListeners();
    }
}

class Parent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return FutureProvider(
        create: (context) => TempProvider().getList(),
        child: Child(),
        );
    }   
}

class Child extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
    var futureProvider = Provider.of<List<Widget>>(context);

        return Container(
        child: futureProvider == null 
            ? Text('Loading...'
            : ListView.builder(
                itemCount: futureProvider.length,
                itemBuilder: (BuildContext context, int index){
                    return futureProvider[index];
                }
            ),
        ));
    }   
}

基本上,它的作用是来自 Future 的小部件列表是我拥有的 ListView Builder 的内容,因为它的对象是从数据库查询生成的。 这些小部件是按下时应更新“计数”值并应更新显示最新“计数”值的文本小部件的按钮。

我能够测试按钮,它们似乎可以工作,并且正在通过后端增加 _count 值,但是,即使 Provider 值已更新,Text Widget 上显示的“Count”也不会更新。

我想就这里的问题寻求您的帮助,根据我的理解,只要值发生变化,事情就应该更新,这是 Provider 反模式,我是否必须重建整个 ListView,或者我错过了其他东西?

我仍在熟悉这个包和一般的 dart/flutter,希望您能与我分享您在这方面的专业知识。 非常感谢您提前。

所以昨晚和今天早上我一直在进行大量的研究和大量的试验和错误,我只是不小心碰到了一个有效的想法!

您只需要将监听值放在消费者小部件上,确保它监听我们已经在小部件树中更高层实现的最近的提供者。 (考虑到我已经在 FutureProvider 小部件下方绘制了我的 ListView 构建器)

..getList() async{
    Consumer<ChallengeViewProvider>(
        builder: (_, foo, __) => Text(
            '${foo.count}',
        ),
    );

    List _result = await db....
    _result.forEach((_item){
        addToList(Button(
            onTap: () => increment();
            child: Text('Press'),
        ));
    });
}

我还重构了我的小部件并将 Button 作为无状态小部件拉出以供重用。 尽管确保引用的 Button 订阅了具有 Counter 值的同一个父提供者,并让 onTap 属性通过 Provider<>.of 调用 increment() 函数

希望这对未来的任何人都有帮助!

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM