我在应用程序中使用100,但我面临着不必要的建设.

示例

class AllWidget extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    print('state build called');
    return ChangeNotifierProvider(
            builder: (_) => MyCounter(),
            child: Column(children: <Widget>[
                  MyCounterText(),
                  MyIncreaseButton(),
                  MyDecreaseButton(),
            ],
          ),
    );
  }
}

class MyCounterText extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    final myCounter = Provider.of<MyCounter>(context, listen: false);
    print('MyCounterText');
    return Text(myCounter.num.toString());

  }
}

class MyIncreaseButton extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    final myCounter = Provider.of<MyCounter>(context, listen: false);
    print('MyIncreaseButton');
    return RaisedButton(
      child: Text('Increase +'),
      onPressed: ()=> myCounter.increment(),
    );

  }
}


class MyDecreaseButton extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    final myCounter = Provider.of<MyCounter>(context, listen: false);
    print('MyDecreaseButton');
    return RaisedButton(
      child: Text('Decrease -'),
      onPressed: ()=> myCounter.decrement(),
    );

  }
}

现在,如果我单击MyIncreaseButton小部件以增加值,MyDecreaseButton小部件也会构建,即使我没有单击它.

反之亦然,如果我点击MyDecreaseButton小部件,以减少值,MyIncreaseButton小部件也会生成,即使我没有点击它.

我的期望是:

When clicking 100 widget, 101 widget should not build.

推荐答案

我只是通过如下编辑代码来避免不必要的渲染:

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

class MyCounter with ChangeNotifier {
  int _num = 0;

  int get num => _num;

  set num(int n) {
    _num = n;
    notifyListeners();
  }

  void increaent() {
    _num = _num + 1;
    notifyListeners();
  }

  void decrement() {
    _num = _num - 1;
    notifyListeners();
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('root build called');
    return ChangeNotifierProvider(
        builder: (context) => MyCounter(),
        child: MaterialApp(
          title: 'MyAppJan',
          home: Scaffold(
            appBar: AppBar(title: Text('Home')),
            body: AllWidget(),
          ),
          theme: ThemeData(primarySwatch: Colors.orange),
        ));
  }
}

class AllWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('state build called');
    return Center(
      child: Column(
        children: <Widget>[
          MyCounterText(),
          SizedBox(height: 10),
          MyIncreaseButton(),
          SizedBox(height: 10),
          MyDecreaseButton(),
        ],
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
      ),
    );
  }
}

class MyCounterText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('MyCounterText');
    return Consumer<MyCounter>(
      builder: (context, myCounter, _) {
        return Text(myCounter.num.toString());
      },
    );
  }
}

class MyIncreaseButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final _items = Provider.of<MyCounter>(context,listen: false);
    print('MyIncreaseButton');
    return RaisedButton(
      child: Text('Increase ++'),
      onPressed: () => _items.increment(),
    );
  }
}

class MyDecreaseButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final _items = Provider.of<MyCounter>(context,listen: false);
    print('MyDecreaseButton');
    return RaisedButton(
      child: Text('Decrease --'),
      onPressed: () => _items.decrement(),
    );
  }
}

Flutter相关问答推荐

Flutter -带有TextAlign.right的文本字段不显示空白

如何在flutter中获得类似属性的float(CSS属性)

如何在凌晨12点显示00:00(24小时格式)而不是在Flutter 中显示24:00

如何让一个名为ONTAP的回调函数、另一个名为onTapDown的回调函数和另一个名为onTapUp的回调函数不重叠?

下拉图标未居中

如何在WidgetRef引用外部的函数中使用Riverpod刷新数据

Flutter 动画列表一次构建所有项目,而不是仅构建可见的项目

使用GO_ROUTER在模式内导航

我如何在Android 13中通过Flutter应用程序打开文件(不是图像、视频或音频)?

2023 年如何使用 youtube_explode_dart 包下载 URL?

Flutter:注册 UI 出现 UI 问题(将注册框提升到顶部并向电话号码 pin 码添加一个框)

课程中的访问Provider

Android 模拟器在 Apple M2 芯片 EXC_BAD_ACCESS / KERN_INVALID_ADDRESS 上随机崩溃

如何将行推到列的底部

如何解决需要一个标识符,但得到的是:.try 在:之前插入一个标识符.dart 错误

Flutter 错误:OutletListModel类型的值不能分配给List类型的变量?

Listview 如何转到下一行/新行?

为什么 Flutter riverpod 直接分配不起作用但方法可以

我的主屏幕上的 FutureBuilder 不断重新加载(但仅在其他屏幕上时)?

解密 Modulr 安全令牌