消费者提供者 Flutter 中 child 的目的是什么

Question

我有一个关于 Flutter 中的 Provider 包的 Consumer 的问题。我不明白在 Consumer 的构建器中参数“child”的目的

Consumer<MyModel>(builder: (context, myModel, child) {
// doing stuff using myModel variable
});

我找不到任何关于它的文档。

Answer 1

child 是任何不需要提供程序内部数据的小部件，因此当数据更新时，它们不会重新创建，因为它们不需要数据，而是将它们作为对建设者

    Consumer(
       builder: (context, myModel, child) {
         // child will refer to the MaterialButton provided as the child argument in the 
        //Consumer named parameter,
        / doing stuff using myModel variable
       }
       child: MaterialButton( 
               child: Text("Do some action"), 
              onPressed: () {
             // do some actions
    },),);

因为 MaterialButton 不需要提供者的状态，但它在后代树中，所以不需要重新渲染它，所以它会被传递回构建器，以节省内存并提高性能

Answer 2

子级可以用作当提供者值更改和消费者重建时不重建的部分。

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

final valueProvider = Provider<int>((ref) => 10);
final stateProvider = StateProvider<int>((ref) => 20);

void main() => runApp(ProviderScope(child: const MyApp()));

class MyApp extends StatelessWidget {
  static const title = 'Riverpod Test';
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: title,
      home: MyHomePage(title: title),
    );
  }
}



class MyHomePage extends StatelessWidget {
  final String title;
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),

      body: Center(
        child: Consumer(

          builder: (context, WidgetRef ref, child) {
            print(context);
            final value = ref.watch(valueProvider);
            final stateValue = ref.watch(stateProvider);

            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('$value, $stateValue'),
                Container(child: child),
                Builder(
                  builder: (context) {
                    print('$context child 2');
                    return Container(child: Text('Child 2'));
                  },
                ),
              ],
            );
          },

          child: Builder(
            builder: (context) {
              print('$context child 1');
              return Text('Child 1');
            },
          ),

        ),
      ),

      floatingActionButton: Consumer(
        builder: (_, WidgetRef ref, __) {
          return FloatingActionButton(
            onPressed: () {
              ref.read(stateProvider.state).state++;
            },
            child: Icon(Icons.add),
          );
        }
      ),
    );
  }
}

子 2 位于 Consumer 小部件内，当您按 + 按钮时它会重建。但孩子 1 永远不会重建

I/flutter (16579): Consumer(dirty, dependencies: [UncontrolledProviderScope], state: _ConsumerState#7620b)
I/flutter (16579): Builder(dirty) child 1
I/flutter (16579): Builder(dirty) child 2
Reloaded 1 of 614 libraries in 1,176ms (compile: 80 ms, reload: 686 ms, reassemble: 299 ms).
I/flutter (16579): Consumer(dirty, dependencies: [UncontrolledProviderScope], state: _ConsumerState#7620b)
I/flutter (16579): Builder(dirty) child 2
I/flutter (16579): Consumer(dirty, dependencies: [UncontrolledProviderScope], state: _ConsumerState#7620b)
I/flutter (16579): Builder(dirty) child 2
I/flutter (16579): Consumer(dirty, dependencies: [UncontrolledProviderScope], state: _ConsumerState#7620b)
I/flutter (16579): Builder(dirty) child 2